创建平滑Javascript弹出菜单

Question

hy all, i tryed to use this code as seen on a tutorial, but it didn't work..any ideas what could be the problem 大家好，我尝试使用教程中所见的代码，但是它没有用..任何想法可能是问题所在

My html file: 我的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 CSS : 我的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;  
}

MY JAvascript file: 我的Java档案：

<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;amp;amp; popupStatus==1){  
    disablePopup();  
    }  
    });  

    });  


</script>

I usually get problems about the js file when i copied it right from the source, so i dunno what to do 当我直接从源代码复制js文件时，我通常会遇到问题，所以我不知道该怎么办

Answer 1

Replace your code with mine. 用我的代码替换。

You had syntax error in your javascript code. 您的JavaScript代码中有语法错误。

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

  <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>
  <style type="text/css">
/*<![CDATA[*/
  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;  
  }  
  /*]]>*/
  </style>
 </script>
  <script type="text/javascript">
//<![CDATA[
    //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 && popupStatus==1){  
    disablePopup();  
    }  
    });  

    });  


  //]]>
  </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" name="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>

Answer 2

simply remove tags 只需删除标签

<script type="text/javascript">
...
</script>

from Popup.js 来自Popup.js

and replace 并更换

 &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;

with 同

&&

Answer 3

Replace this (it's at the bottom): 替换它（在底部）：

//Press Escape event!  
    $(document).keypress(function(e){  
    if(e.keyCode==27 &amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp; popupStatus==1){  
    disablePopup();  
    }  
    });

With this: 有了这个：

//Press Escape event!  
$(document).keypress(function(e) {
    if (e.keyCode == 27 && popupStatus == 1) {
        disablePopup();
    }
});

And remove <script type="text/javascript"> and </script> in popup.js. 并在popup.js中删除<script type="text/javascript">和</script> 。

创建平滑Javascript弹出菜单

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-03-17 08:52:40

解决方案2
0 2012-03-17 08:51:18

解决方案3
0 2012-03-17 08:56:57

创建平滑Javascript弹出菜单

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-03-17 08:52:40

解决方案2 0 2012-03-17 08:51:18

解决方案3 0 2012-03-17 08:56:57

解决方案1
1 已采纳 2012-03-17 08:52:40

解决方案2
0 2012-03-17 08:51:18

解决方案3
0 2012-03-17 08:56:57