jquery实现弹出层效果实例

前端技术 2023/09/06 JavaScript

本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：

<head runat=\"server\">
<title>jQuery弹出层</title>
<script type=\"text/javascript\" src=\"js/jquery-1.3.2-min.js\"></script>
<script type=\"text/javascript\">
 $(function() {
  $(\"#btnShow\").click(function() {
  // var str = \"我是弹出对话框\";
  // $(\".form\").html(str);
  $(\"#BgDiv\").css({ display: \"block\", height: $(document).height()});
  var yscroll = document.documentElement.scrollTop;
  $(\"#DialogDiv\").css(\"top\", \"100px\");
  $(\"#DialogDiv\").css(\"display\", \"block\");
  document.documentElement.scrollTop = 0;
  });
  $(\"#btnClose\").click(function() {
  $(\"#BgDiv\").css(\"display\", \"none\");
  $(\"#DialogDiv\").css(\"display\", \"none\");
  });
 });
</script>
<style type=\"text/css\">
 body, h2
 {
  margin: 0;
  padding: 0;
 }
 #BgDiv
 {
  background-color: #e3e3e3;
  position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 1000px;
  opacity: 0.5;
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
 }
 #DialogDiv
 {
  position: absolute;
  width: 400px;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  height: auto;
  z-index: 100;
  background-color: #fff;
  border: 1px #8FA4F5 solid;
  padding: 1px;
 }
 #DialogDiv h2
 {
  height: 25px;
  font-size: 14px;
  background-color: #8FA4F5;
  position: relative;
  padding-left: 10px;
  line-height: 25px;
 }
 #DialogDiv h2 a
 {
  position: absolute;
  right: 5px;
  font-size: 12px;
  color: #000000;
 }
 #DialogDiv .form
 {
  padding: 10px;
 }
 </style>
</head>
<body>
 <form id=\"form1\" runat=\"server\">
 <div id=\"BgDiv\"></div>
 <div id=\"DialogDiv\" style=\"display: none\">
 <h2>
  弹出层<a href=\"#\" id=\"btnClose\">关闭</a></h2>
 <div class=\"form\">
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
  我是弹出对话框!!<br />
 </div>
 </div>
 <p>
  </p>
 <p align=\"center\">
 <input value=\"弹出\" class=\"but\" type=\"button\" id=\"btnShow\" />
 </p>
 </form>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/15693

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案