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


jQuery点击弹出层可拖动特效代码下载
jQuery点击弹出层可拖动特效代码下载以及点击弹出层、可拖动等js/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>

相关推荐

发表评论

相关文章