Javascript 和 Jquery 弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9748298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-26 07:42:05 来源:igfitidea点击:
Javascript and Jquery PopUp window
提问by ELias Rahme
hy all, I have tried several tutorials to create a javascript or Jquery smooth PopUp window but nothing worked.. I need it to run considering that i am using HTML5. i need a code that is certain to work. Any ideas? I need a smooth popup window and i don't know how to do it anyone help? My HTML :
大家好，我已经尝试了几个教程来创建一个 javascript 或 Jquery 平滑的弹出窗口，但没有任何效果。考虑到我使用的是 HTML5，我需要它运行。我需要一个肯定可以工作的代码。有任何想法吗？我需要一个平滑的弹出窗口，但我不知道该怎么做，有人帮忙吗？我的 HTML ：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>yensdesign.com - How to create a stuning and smooth popup in jQuery</title>
<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="Popup.js" type="text/javascript"></script>
</head>
<body>
<center>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
<div id="button"><input type="submit" value="Press me please!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Title of our cool popup, yay!</h1>
<p id="contactArea">
Here we have a simple but interesting sample of our new stuning and smooth popup. As you can see jQuery and CSS does it easy...
<br/><br/>
We can use it for popup-forms and more... just experiment!
<br/><br/>
Press ESCAPE, Click on X (right-top) or Click Out from the popup to close the popup!
<br/><br/>
<a href="http://www.yensdesign.com"><img src="logo.jpg" alt="Go to yensdesign.com"/></a>
</p>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
My Javascript file :
我的 Javascript 文件：
<script type="text/javascript">
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
alert(popupStatus);
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
alert(popupStatus);
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
$(document).ready(function(){
//following code will be here
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp; popupStatus==1){
disablePopup();
}
});
});
</script>
My CSS file :
我的 CSS 文件：
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background:#fff none repeat scroll 0%;
line-height:1;
font-size: 12px;
font-family:arial,sans-serif;
margin:0pt;
height:100%;
}
table {
border-collapse:separate;
border-spacing:0pt;
}
caption, th, td {
font-weight:normal;
text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
a{
cursor: pointer;
text-decoration:none;
}
br.both{
clear:both;
}
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
#button{
text-align:center;
margin:100px;
}
回答by Kamyar Nazeri
Have you seen JQueryUI Dialog?
你见过JQueryUI 对话框吗？
回答by user2722002
Let's keep it simple, yeah?
让我们保持简单，是吗？
Your HTML is simple. Two divs, one for your popup, and the other to cover the screen. Two buttons are added to give us something to click:
你的 HTML 很简单。两个 div，一个用于弹出窗口，另一个用于覆盖屏幕。添加了两个按钮来让我们点击：
<div class="cover"></div>
<div class="popup">
<button class="close">close</button>
</div>
<button class="open">click me</button>
The CSS adds some basic styling, but puts them on screen in the right place:
CSS 添加了一些基本样式，但将它们放在屏幕上的正确位置：
.popup
{
position:fixed;
border:solid 1px black;
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
display:none;
background-color:white;
}
.cover
{
background-color:black;
width:100%;
height:100%;
display:none;
position:fixed;
}
Now wire it up:
现在接线：
$(".open").click(function () {
$(".popup").fadeIn(500);
$(".cover").fadeTo(500, 0.5);
});
$(".close").click(function () {
$(".popup").fadeOut(500);
$(".cover").fadeOut(500);
});
