快捷導(dǎo)航

jQuery實現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動)

更新時間：2015年09月19日 15:35:16 作者：企鵝

這篇文章主要介紹了jQuery實現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動的功能,涉及jQuery響應(yīng)鼠標事件動態(tài)變換頁面元素樣式的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)單擊彈出Div層窗口效果。分享給大家供大家參考。具體如下：

這是一款jquery實現(xiàn)的可拖動可關(guān)閉的彈出框效果，網(wǎng)上已經(jīng)有很多類似效果了，網(wǎng)頁上實現(xiàn)這種效果其實并不難，現(xiàn)在又有了jquery讓我們用，更方便了，本代碼演示了在CSS代碼、JavaScript代碼和HTML三者結(jié)合的情況下，如何實現(xiàn)一個可關(guān)閉的彈出窗口，鼠標點擊關(guān)閉按鈕后將其關(guān)閉，然后會顯示打開按鈕，單擊這個按鈕即彈出這個層窗口。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/js-close-able-alert-dlg-style-codes/

具體代碼如下：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>windows</title>
<style>
#main{position: absolute;top: 10%;left: 10%;}
#title{width: 500px;height: 19px;border-top: #85ABE4 1px solid;border-right: #222 1px solid;border-left: #85ABE4 1px solid;border-bottom: none;background: #5B8BD9;}
#content{border: #85ABE4 1px solid;border-top: none;width: 500px;height: 300px;}
#content img{width: 500px;height: 300px;}
#off{float: right;cursor: pointer;}
.none{display: none;}
.show{display: block;}
#open{background: #fff;border: #555 1px solid;height: 13px;width: 50px;position: absolute;left: 50px;top: 400px;cursor: pointer;}
#open marquee{font-size: 12px;color: #555;}
#img{background: url(images/s.jpg) no-repeat;float: right;width: 49px;height: 19px;}
#img: hover{background: url(images/sh.jpg) no-repeat;}
#ten{float: left;width: 400px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//設(shè)置標題欄
document.title="0.0 WINDOW";
//窗口的拖動
var bool=false;
var offsetX=0;
var offsetY=0;
$("#main").mousedown(function(){
bool=true;
offsetX = event.offsetX;
offsetY = event.offsetY;
$("#ten").css('cursor','move');
})
 .mouseup(function(){
  bool=false;
  })
 $(document).mousemove(function(e){
  if(!bool)
  return;
  var x = event.clientX-offsetX;
  var y = event.clientY-offsetY;
  $("#main").css("left", x);
  $("#main").css("top", y);
  })
//窗口的關(guān)閉
$("#img").click(function() {
$("#main").removeClass("show");
$("#main").addClass("none");
$("#open").addClass("show"); });
$("#open").click(function() {
$("#main").removeClass("none");
$("#main").addClass("show");
$("#open").removeClass("show");
$("#open").addClass("none");
});
});
</script>
</head>
<body>
<div id="main" class="show">
<div id="title">
<div id="ten"></div>
<div id="img" title="close"></div>
</div>
<div id="content">
</div>
</div>
<div id="open" class="none" title="">
<marquee>點擊彈出窗口</marquee>
</div>
</body>
</html>

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: