Jquery Popup Message Showing before button is clicked?

Question

hi there I have this code but for some reason the message its showing before clicking on the buttons. I don't know why its happening. I am new to this, so I have been trying with different things but its not working properly. I also don't know how I can position it in different places . the code suppose to be this

$('element_to_pop_up').bPopup({
            follow: [false, false], //x, y
            position: [150, 400] //x, y
        });

but when I put it in there it doesnt work at all.

---

HTML:

<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
  <div id="popup" style="left: 424.5px; position: fixed; top: 133.5px; z-index: 9999; display: block;">
        <span class="button bClose"><span>X</span></span>
        If you can't get it up use<br>
        <span>bPopup</span>
    </div>
</div>

CSS:

#popup {

    background-color: white;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 25px 5px #999;
    color: #111;
    display: none;
    min-width: 450px;
    padding: 25px;

}

Answer 1

Add this to your css

#element_to_pop_up {display:none;}

Here is the fiddle

FIDDLE

Answer 2

Ummm you have display: block; in the inline css:

<div id="popup" 
 style="left: 424.5px; position: fixed; top: 133.5px; z-index: 9999; display: block;">

This overrides the style in your stylesheet, giving you a bad time. You want to just remove it:

<div id="popup" 
 style="left: 424.5px; position: fixed; top: 133.5px; z-index: 9999;">

---

To explain:

You have display: block; inside of the css that is on your popup's style attribute.

You need to remove that, and then your display: none in your real CSS will kick in where it is supposed to.

Demo: http://jsfiddle.net/uRVaf/4/

Answer 3

you can use something like onclick or onsubmit ;

<input type="button" name="button" value = "submit" onclick="POPup()"  />

and your javaScript code would b like

<script type="text/javascript">

function POPup(){
//.... your pop up code goes here
}
</script>