你好,我编写了以下 JavaScript 以使动态创建的 ID 标签的模态框能够通过调整大小功能垂直居中显示在屏幕上(无论其宽度和高度如何)。
但是,在页面加载时,模态框会显示出来,而不是通过单击按钮的方式显示。我是新手,所以不知道我需要在代码中做什么修改,以便在页面加载时将模态框隐藏。
Javascript:
$('body').prepend('');
$(function(){ $(window).resize(function(){
// 获取屏幕的高度和宽度 var maskHeight = $(window).height(); var maskWidth = $(window).width();
// 计算居中对齐的值 var dialogTop = (maskHeight - $('.modalbox').height())/2; var dialogLeft = (maskWidth - $('.modalbox').width())/2;
// 将值分配给遮罩和对话框 $('#overlay').css({ height:maskHeight, width:maskWidth }).show(); $('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show(); }).resize(); });
$('a.modal').each(function() { var link = $(this); var id = link.attr('href'); var target = $(id);
if($("#modalcontainer " + id).length === 0) { $('#modalcontainer').append(target); }
$("#main " + id).remove();
link.click(function() { $('#modalcontainer > div').hide(); target.show(); $('#overlay').show(); return false; }); });
$('.close').click(function() { $('#modalcontainer > div').hide(); $('#overlay').hide();
return false; });
CSS:
#overlay { background: url(../img/overlay_bg.png); position:absolute; z-index:10; }
#modalcontainer { position:absolute; z-index:20; }
HTML:
<a href="#modal1" class="modal button plain">view modal</a>
<div style="width:650px; height:400px;" id="modal1" class="modalbox">
<div class="box-header">
<p align="center">Here is your modal</p>
<div class="box-content">
</div>
<div align="center" class="action_bar">
<a href="#" class="close button blue">Close</a>
</div>
</div>
</div>
在jsfiddle上查看演示:http://jsfiddle.net/5Egf8/4/
非常感谢您的帮助。
注:该内容是请求查看演示并表示感激之意。