pop弹出 dialog对话框

最新推荐文章于 2020-01-03 14:33:43 发布

piperzero

最新推荐文章于 2020-01-03 14:33:43 发布

阅读量2.7k

点赞数

分类专栏：网站建设

本文链接：https://blog.csdn.net/freejs/article/details/17464415

版权

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

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>  
 
 