如何实现多个弹出窗口?
问题描述:
我要实现多个弹出窗口的问题。我从网上获得这个脚本,当我申请一个弹出窗口时是正确的,但如果我做了这个副本,这是正确的。你可以看到它:Dendrosite。在距左菜单(Sinopsi/Fitxa/Autors)我在一个(Sinopsi)实施正确地将,但现在我可以实现与其他(Fitxa/Autors)如何实现多个弹出窗口?
HTML:
<li class="sinopsi"><a id="go"><span></span></a></li>
<div id="popupContact">
<a id="popupContactClose"></a>
<h1></h1>
<h3>
<br/><br/>
</h3>
</div>
<div id="backgroundPopup"></div>
的Javascript:
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("fast"); $("#popupContact").fadeIn("fast"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("fast"); $("#popupContact").fadeOut("fast"); popupStatus = 0; } } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#go").click(function(){ //centering with css //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(); } }); });
和CSS:
#backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; z-index:1; } #popupContact{ margin-top: -104px; margin-left:102px; display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:288px; width:600px; z-index:9; padding:12px; background-color: #333; filter: alpha(opacity=20); opacity: .5 } #popupContact h1{ font-family:Arial, Helvetica, sans-serif; font-size:20px; color:#FFF; text-shadow: 0px 1px 1px #000; padding-bottom:10px; margin-bottom:30px; border-bottom-width: 1px; border-bottom-style: solid; } #popupContact h3{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFF; text-align: justify; } #popupContactClose{ font-size:18px; line-height:14px; right:6px; top:4px; position:absolute; color: #ffeb70; font-weight:700; display:block; cursor: pointer; font-family: Arial, Helvetica, sans-serif; }
谢谢!
答
它不工作了,对于每一个#go #go1 #go2
弹出链接,您需要三个独立的事件处理程序,不只是一个原因。这就是为什么多个盒子弹出窗口,当你点击一个,当你点击其他两个没有任何弹出窗口。
为了让这个工作,我会重写弹出脚本来支持多弹出窗口。但是你可以简单地在没有使用函数的情况下执行此操作。
HTML(合并下面的代码与你的。这些ID,类名涉及到的JavaScript)
<li id='sinopsi' class='openlink'>Sinopsi
<div class='popup' id='popup1'>Popup 1<span class='closex'>x</span></div>
</li>
<li id='fitxa' class='openlink'>Fitxa
<div class='popup' id='popup2'>Popup 2<span class='closex'>x</span></div>
</li>
<li id='autors' class='openlink'>Autors
<div class='popup' id='popup3'>Popup 2<span class='closex'>x</span></div>
</li>
的JavaScript
<script>
$(function(){
$('#sinopsi').click(function(){ // Activates the popups
$('#popup1').fadeIn('fast')
});
$('#fitxa').click(function(){
$('#popup2').fadeIn('fast')
});
$('#sinopsi').click(function(){
$('#popup3').fadeIn('fast')
});
/* //Note that if your HTML is properly nested you could easily have this command execute your popups instead of the three above
$('.openlink').click(function(){
$(this)
.find('.popup') // finds your nested popup div
.fadeIn('fast')
;
});
*/
$('.closex').click(function(){ // closes the popup, when X is clicked
$('.popup').fadeOut('fast');
});
$('.popup').keypress(function(e){ // close popup via ESC key.
if(e.keyCode==27){
$(this).fadeOut('fast');
}
});
$('.popup').css({opacity: "0.7"}); // copies over the transparency
});
</script>
CSS(确保弹出窗口加载隐藏。)
.popup{display:none}
祝你好运队友,该网站看起来很不错BTW。您应该真的了解更多关于jQuery的知识,与JavaScript相比,它非常强大并且非常易于使用。我想你会喜欢它的。
http://jquery.com/ http://api.jquery.com/click/
附:不要担心所有那些匿名函数function(){//do stuff}
,它只是一个简写function bar(){//do stuff} $('.open').click(bar)
感谢Quang !!! – aleish76 2011-03-21 23:14:58
有没有办法使用弹出类代替多个ID喜欢popup1 popup2 popup3?我的问题是在数百个div中设置多个ID。 – abhils 2018-01-19 05:54:59
@abhils,是的,你可以使用jQuery环通与元素'.popup'类和你想他们什么。 – 2018-01-29 16:19:07