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>