<分区>
在我的 Web 应用程序中，我想创建一个页面的弹出屏幕，供用户在其中进行一些处理。
我基本上希望这个页面像一个向下钻取窗口，根据您从顶级摘要记录中按下的按钮显示详细记录。
我考虑的不是弹出窗口，而是 jQuery 灯箱功能/模态窗口。
我愿意接受建议和简单的灯箱示例，这些灯箱用于显示网络屏幕而不是照片，几乎是一个弹出窗口，但具有 jQuery 的外观和感觉，即可以放大到用户，然后缩小回到摘要记录。
标签 javascript jquery
<分区>
在我的 Web 应用程序中，我想创建一个页面的弹出屏幕，供用户在其中进行一些处理。
我基本上希望这个页面像一个向下钻取窗口，根据您从顶级摘要记录中按下的按钮显示详细记录。
我考虑的不是弹出窗口，而是 jQuery 灯箱功能/模态窗口。
我愿意接受建议和简单的灯箱示例，这些灯箱用于显示网络屏幕而不是照片，几乎是一个弹出窗口，但具有 jQuery 的外观和感觉，即可以放大到用户，然后缩小回到摘要记录。
最佳答案
试试这个例子，
<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>
关于javascript - 用于弹出网页屏幕的 jQuery Lightbox/Modal 窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1068586/
相关文章：
javascript - 如何组织 Javascript 项目以允许在客户端 SPA 和 Node 服务器之间共享代码
javascript - 在提交 form2 之前从 form1 获取值到 form2 的任何可能方法
php - fancybox:打开外部子页面加载其后面的父页面
rest - jquery 中对 rest api 的 ajax 调用不再有效，由过期的 ssl 证书引起？
javascript - 如何在 Typescript 1.8 中包含未类型化的节点模块？
javascript - 如何设置和调用 ANTLR4 Javascript Visitor