jQuery menyedari kesan mengklik untuk muncul tetingkap lapisan Div (boleh ditutup dan diseret)

jQuery menyedari kesan mengklik untuk muncul tetingkap lapisan Div (boleh ditutup dan diseret)_jquery

WBOY

Lepaskan： 2016-05-16 15:38:30

asal

1125 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery boleh mencapai kesan muncul tetingkap lapisan Div dengan mengklik padanya. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah kesan kotak pop timbul yang boleh diseret dan boleh ditutup yang dilaksanakan oleh jquery adalah lebih mudah. Okay, kod ini menunjukkan cara melaksanakan tetingkap timbul yang boleh ditutup dengan menggabungkan kod CSS, kod JavaScript dan HTML Klik butang tutup dengan tetikus untuk menutupnya, dan kemudian butang buka akan dipaparkan butang. Tetingkap lapisan ini muncul.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

<!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(){
//设置标题栏
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);
  })
//窗口的关闭
$("#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>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.