jQuery点击弹出层可拖动特效代码下载

jQuery点击弹出层可拖动特效代码下载

1. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popup.js"></script>

2. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* { margin: 0; padding: 0; }
body { font-family: "Microsoft Yahei"; font-size: 16px; }
#mask_shadow {
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}
#popup {
  display: none;
  opacity: 0; 
  position: absolute;
  z-index: 2;
  top: 150px;
  width: 600px;
  height: 190px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
#popup .title {
  position: relative;
  width: 100%;
  height: 55px;
  background-color: #5bc0de;
  cursor: move;
}
#popup .title p {
  padding-left: 14px;
  line-height: 55px;
  color: #fff;
}
#popup .title span {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 30px;
  height: 30px;
  color: #000;
  opacity: .2;
  font-size: 21px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #333;
}
#popup .title span:hover {
  opacity: .8;
}
#popup .cont { width: 100%; height: 135px; background-color: #EDEDED;    }
#btn1 {
  margin: 30px;
}
</style>
</head>
<body style=" height: 2000px; ">
<center>
<input type="button" value="点击弹出框" id="btn1">
</center>
<div id="popup">
<div class="title">
  <p data-title="Popup Text"></p>
  <span>x</span>
</div>
<div class="cont"></div>
</div>
<div id="mask_shadow"></div>
<script>
$(function () {
  /**
	  ifDrag: 是否拖拽
	  dragLimit: 拖拽限制范围
   */
  $('#popup').popup({ifDrag: true, dragLimit: true});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到