jQuery的灯箱/ Modal窗口的弹出网页屏幕

在我的web应用程序，我想创建一个网页的弹出式屏幕为用户做一些处理的。jQuery的灯箱/ Modal窗口的弹出网页屏幕

我基本上要这个页面就像是一个基于您从顶级摘要记录中按下的按钮来显示详细索引的向下钻取窗口。

取而代之的是一个弹出窗口，我正在考虑一个jQuery lightbox特性/模式窗口。

我开放的建议和灯箱的用于显示网页的屏幕，而不是照片，几乎是一个弹出窗口，好轻松的例子，但有一个jQuery的外观和感觉，即东西到用户缩放和然后缩小到摘要记录。

希望有人能够帮助例子/网址等

感谢。 Tony。

来源

2009-07-01 tonyf

试试这个例子，

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Simple JQuery Modal Window from Queness</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });    

}); 

</script> 
<style> 
body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:absolute; 
    left:0; 
    top:0; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
} 

#boxes #dialog { 
    width:375px; 
    height:203px; 
    padding:10px; 
    background-color:#ffffff; 
} 

</style> 
</head> 
<body> 
<h2>Simple jQuery Modal Window</h2> 
<ul> 
<li><a href="#dialog" name="modal">Simple Window Modal</a></li> 
</ul> 

<div id="boxes"> 
<div id="dialog" class="window"> 
Simple Modal Window | 
<a href="#"class="close"/>Close it</a> 
<p>Anything can go Here</p> 
</div> 
<!-- Mask to cover the whole screen --> 
    <div id="mask"></div> 
</div> 

</body> 
</html>

来源

2009-07-01 13:06:02

谢谢托尼。根据你的例子，是否有可能通过传递一个url作为源代码将它用作iframe模式窗口？另外，'Esc'键可以用来关闭模态窗口吗？ – tonyf 2009-07-01 13:23:41