javascript - Multiple Instances on jQuery PopUp on same page -

javascript - Multiple Instances on jQuery PopUp on same page -

i using jquery popup on website , multiple instances of on same page have no thought on how that...

this js i'm using

//setting our popup //0 means disabled; 1 means enabled; var popupstatus = 0; //loading popup jquery magic! function loadpopup(){ //loads popup if disabled if(popupstatus==0){ $("#backgroundpopup").css({ "opacity": "0.7" }); $("#backgroundpopup").fadein("slow"); $("#popupcontact").fadein("slow"); popupstatus = 1; } } //disabling popup jquery magic! function disablepopup(){ //disables popup if enabled if(popupstatus==1){ $("#backgroundpopup").fadeout("slow"); $("#popupcontact").fadeout("slow"); popupstatus = 0; } } //centering popup function centerpopup(){ //request info centering var windowwidth = document.documentelement.clientwidth; var windowheight = document.documentelement.clientheight; var popupheight = $("#popupcontact").height(); var popupwidth = $("#popupcontact").width(); //centering $("#popupcontact").css({ "top": windowheight/2-popupheight/2, "left": windowwidth/2-popupwidth/2 }); //only need forcefulness ie6 $("#backgroundpopup").css({ "height": windowheight }); } //controlling events in jquery $(document).ready(function(){ //loading popup //click button event! $("#newboatbutton").click(function(){ //centering css centerpopup(); //load popup loadpopup(); }); //closing popup //click x event! $("#popupcontactclose").click(function(){ disablepopup(); }); //click out event! $("#backgroundpopup").click(function(){ disablepopup(); }); //press escape event! $(document).keypress(function(e){ if(e.keycode==27 && popupstatus==1){ disablepopup(); } }); });

and hmtl it

<div id="popupcontact"> <a id="popupcontactclose">x</a> <?php require 'newboat.php'; ?> </div> <div id="backgroundpopup"></div>

all activated button

<div id="newboatbutton" style="float: left; margin-top: 18px; margin-left: 15px;"><input type="submit" value="add new boat" /></div>

any help useful give thanks you...

here illustration of how can re-use function. can see in action here: http://jsfiddle.net/y1ffwnfn/ basic example, should give starting point.

<div id="popup1" style="display:none;">popup 1</div> <div id="popup2" style="display:none;">popup 2</div> <div id="popup3" style="display:none;">popup 3</div> <div id="mybutton"><input type="button" value="show popup" /></div> <script> function loadpopup(popupid){ $("#" + popupid).fadein("slow"); } $(document).ready(function(){ $("#mybutton").click(function () { if ($("#popup1").is(":hidden") && $("#popup2").is(":hidden") && $("#popup3").is(":hidden")) { loadpopup("popup1"); } else if ($("#popup1").is(":visible") && $("#popup2").is(":hidden") && $("#popup3").is(":hidden")) { loadpopup("popup2"); } else if ($("#popup1").is(":visible") && $("#popup2").is(":visible") && $("#popup3").is(":hidden")) { loadpopup("popup3"); } }); }); </script>

javascript jquery html popup