我是 JQuery 新手,正在尝试向我的页面添加一个弹出框。
我正在使用以下 jQuery 插件(从 Ray Stone 的leanModal 采用):
(function($) {
$.fn.extend({
leanModal: function(options) {
var defaults = {
top: 100,
overlay: 0.5,
closeButton: null
};
var overlay = $("<div id='lean_overlay'></div>");
$("body").append(overlay);
options = $.extend(defaults, options);
return this.each(function() {
var o = options;
$(this).click(function(e) {
var modal_id = $(this).attr("href");
$("#lean_overlay").click(function() {
close_modal(modal_id)
});
$(o.closeButton).click(function() {
close_modal(modal_id)
});
var modal_height = $(modal_id).outerHeight();
var modal_width = $(modal_id).outerWidth();
$("#lean_overlay").css({
"display": "block",
opacity: 0
});
$("#lean_overlay").fadeTo(200, o.overlay);
$(modal_id).css({
"display": "block",
"position": "fixed",
"opacity": 0,
"z-index": 11000,
"left": 50 + "%",
"margin-left": -(modal_width / 2) + "px",
"top": o.top + "px"
});
$(modal_id).fadeTo(200, 1);
e.preventDefault()
})
});
function close_modal(modal_id) {
$("#lean_overlay").fadeOut(200);
$(modal_id).css({
"display": "none"
})
}
}
})
})(jQuery);
我的 CSS 看起来像这样:
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#signup {
width: 404px;
padding-bottom: 2px;
display:none;
background: red;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
我的初始化脚本如下所示:
<script type="text/javascript">
$(function() {
$("#signup").leanModal();
});
</script>
最后,这是我正在使用的 HTML:
<p id="examples" class="section box">
<strong>Example:</strong>
<a id="go" rel="leanModal" name="signup" href="#signup">With Close Button</a>
</p>
<div id="signup">
<div id="signup-ct">
<div id="signup-header">
<h2>This is a test</h2>
<p>testing.</p>
<a class="modal_close" href="#"></a>
</div>
</div>
</div>
使用此代码,弹出窗口不会出现,我觉得必须有一个非常简单的解决方案,但我正在打破我的大脑试图弄清楚它。您可以提供的任何帮助将不胜感激!