jquery实现弹出层效果实例

2024-05-06 16:20:37

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下

本文实例讲述了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>