如何对两个 div 使用相同的弹出式 jquery。我有一个用于弹出窗口的 jquery，它是 div 弹出窗口，我想对另一个 div 使用相同的 jquery。请帮忙。代码如下
<head>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style>
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}</style>
</head>
<body>
<a href="#" class="topopup"><div id="ack" class="topopup">Location</div></a>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content" width="400px" height="500px">
<input type="text" name="mm" id="id">
<button id="ok">ok</button>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
弹出的jquery。我想将此 jquery 用于另一个 div。但是我为另一个 div 指定了相同的名称，但是当我单击该链接时它显示了以前的 div
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$("button#ok").click(function() {
disablePopup();
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7");
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
我想将这个 jquery 用于另一个 div。但是我为另一个 div 指定了相同的名称，但是当我单击该链接时它显示了以前的 div
最佳答案
你从未使用过 <a class="topopup1"></a> ？
关于javascript - 如何对两个 div 使用相同的弹出式 jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21130855/