Несколько экземпляров на JQuery всплывающий на одной странице

Я использую PopUp JQuery на моем сайте, и хотел бы несколько экземпляров на одной странице, но я не имею ни малейшего представления о том, как это сделать ...Несколько экземпляров на JQuery всплывающий на одной странице

Это JS, что я использую

//SETTING UP OUR POPUP 
//0 means disabled; 1 means enabled; 
var popupStatus = 0; 

//loading popup with jQuery magic! 
function loadPopup(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact").fadeIn("slow"); 
     popupStatus = 1; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 

//centering popup 
function centerPopup(){ 
    //request data for 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 force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 


//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 

    //LOADING POPUP 
    //Click the button event! 
    $("#newboatbutton").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the 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(); 
     } 
    }); 

});

и это мой HMTL ибо

<div id="popupContact"> 
<a id="popupContactClose">x</a> 
<?php 
require 'newboat.php'; 
?> 
</div> 
<div id="backgroundPopup"></div>

активируются с помощью этой кнопки

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

Любая помощь будет полезна спасибо ...

источник

2014-11-14 JoshuaBrand

Итак, вы хотите, чтобы каждое всплывающее окно отображалось каждый раз, когда вы нажимаете кнопку, так что вы получаете множество всплывающих окон? –

@HowardRenollet no Я хочу, чтобы я мог использовать всплывающий скрипт несколько раз, чтобы у меня было два всплывающих окна (показывающие разные вещи) на одной странице – JoshuaBrand

параметры передачи в ваши всплывающие функции. Я создам пример для вас –

Вот хороший пример того, как можно повторно использовать функцию. Вы можете увидеть его в действии здесь: http://jsfiddle.net/y1ffwnfn/ Это всего лишь базовый пример, но он должен дать вам хорошую отправную точку.

<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>

источник

2014-11-14 19:34:06

Несколько экземпляров на JQuery всплывающий на одной странице

ответ

Смежные вопросы