TechQA.

bPopup jQuery modal body not showing

561 views Asked by At

So I'm trying to use bPopup as a modal window, but I can't see to get the actual modal window to pop up. I followed the instructions on the documentation (see http://dinbror.dk/bpopup/), but I can't seem to get it appear. Am I missing something? 

    <html>
        <script type = "text/javascript" src = "jquery-1.11.3.min.js"></script>
        <script type = "text/javascript" src = "jquery.bpopup.min.js"></script>
        <p> Some text </p>
        <div style="display:none" id='popup'>
                Why is there no modal body???
        </div>
        <script type = "text/javascript">
                $(document).ready(
                                function(){
                                        $('p').click(function(){
                                                $('#popup').bPopup();
                                        })  
                                })  
        </script>
     </html>

The resulting script looks like this: Before Click After clicking, the result is this: After Click

However, on the documentation, the modal is as follows: enter image description here

I'm really not sure what I'm missing. I'm probably just blind to something really obvious, any ideas?

javascript jquery document-body bpopup
Original Q&A
2

There are 2 answers

0
aleksandar On

Have you read this?

What is bPopup? bPopup is a lightweight jQuery modal popup plugin (only 1.49KB gzipped). It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.


So you need to write your own styles for the modal window.

1
Dhiraj On

Do not give inline style style="display:none". Inline style will have highest priority and hence bpopup does not/cannot change that property.

Style it in css instead like this 

#popup {
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none;
    padding:20px;
    min-width:400px;
    min-height: 180px;
}


$(document).ready(function() {
  $('p').click(function() {
    $('#popup').bPopup();
  });
});
#popup {
  background-color: #fff;
  border-radius: 15px;
  color: #000;
  display: none;
  padding: 20px;
  min-width: 400px;
  min-height: 180px;
}
.bClose {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>

<p>Some text</p>
<div id='popup'>Why is there no modal body???
  <span class="bClose">x</span>
</div>

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in DOCUMENT-BODY

Related Questions in BPOPUP

Popular Questions

Trending Questions