pop弹出 dialog对话框-freejs.net代码演示

首页>>Jquery文字>>pop弹出 dialog对话框(2013-11-22)

pop弹出 dialog对话框

XML/HTML Code

<body onload="popup('<p>加载的时候弹出</p>')">
<h1 class="logo"><a href="http://www.freejs.net" title="freejs首页"><img src="../../images/logo.png" height="47" width="500" alt="freejs首页" /></a></h1>
<div id="main_demo">
<div align="center"><h2><a href="../../article_jquerywenzi_117.html">pop弹出 dialog对话框</a></h2></div>
<a href="javascript:popup('点击弹出')">点我!</a>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message"></div>
<a href="#" class="button">关闭</a>
</div>
</div>

JavaScript Code

<script type="text/javascript">
$(document).ready(function () {
// if user clicked on button, the overlay layer or the dialogbox, close the dialog
$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {
$('#dialog-overlay, #dialog-box').hide();
return false;
});
// if user resize the window, call the same function again
// to make sure the overlay fills the screen and dialogbox aligned to center
$(window).resize(function () {
//only do it if the dialog box is not hidden
if (!$('#dialog-box').is(':hidden')) popup();
});
});
//Popup dialog
function popup(message) {
// get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// calculate the values for center alignment
var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
// display the message
$('#dialog-message').html(message);
}
</script>