jQuery可拖動彈出層效果代碼



87 345 116



特效描述: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>jQuery可拖動彈出層效果代碼</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>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 圖片廣告 提示框/彈出層 彈出層拖動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子