我正在使用这个弹出脚本。 Click
当我向页面添加第二个弹出窗口时,它们都会弹出,页面上的低一个弹出窗口优先显示在顶部。我无法弄清楚如何编写它,这样你就可以在页面上有多个弹出窗口。
JavaScript
(function($) {
$.fn.simplePopup = function() {
var simplePopup = {
initialize: function(self) {
var popup = $(".js__popup");
var body = $(".js__p_body");
var close = $(".js__p_close");
var hash = "#popup";
var string = self[0].className;
var name = string.replace("js__p_", "");
if (!(name === "start")) {
name = name.replace("_start", "_popup");
popup = $(".js__" + name);
name = name.replace("_", "-");
hash = "#" + name;
};
self.on("click", function() {
simplePopup.show(popup, body, hash);
return false;
});
$(window).on("load", function() {
simplePopup.hash(popup, body, hash);
});
body.on("click", function() {
simplePopup.hide(popup, body);
});
close.on("click", function() {
simplePopup.hide(popup, body);
return false;
});
$(window).keyup(function(e) {
if (e.keyCode === 27) {
simplePopup.hide(popup, body);
}
});
},
centering: function(self) {
var marginLeft = -self.width() / 2;
return self.css("margin-left", marginLeft);
},
show: function(popup, body, hash) {
simplePopup.centering(popup);
body.removeClass("js__fadeout");
popup.removeClass("js__slide_top");
window.location.hash = hash;
},
hide: function(popup, body) {
popup.addClass("js__slide_top");
body.addClass("js__fadeout");
window.location.hash = "#";
},
hash: function(popup, body, hash) {
if (window.location.hash === hash) {
simplePopup.show(popup, body, hash);
}
}
};
return this.each(function() {
var self = $(this);
simplePopup.initialize(self);
});
};
})(jQuery);
HTML
<script type="text/javascript">
$(function() {
$(".js__p_start, .js__p_another_start").simplePopup();
});
</script>
<div class="p_anch">
<a href="#" class="js__p_start">Click Here,</a> jQueryScript.nEt
</div>
<div class="p_body js__p_body js__fadeout"></div>
<div class="popup js__popup js__slide_top">
<a href="#" class="p_close js__p_close" title="Close"></a>
<div class="p_content">jQueryScript.Net Demo</div>
</div>