基於jquery的可移動dialog 和 頁面遮蓋層
阿新 • • 發佈：2019-02-10
jquery的版本是1.x
可移動的DiaLog
HTML程式碼為：
<!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>moveDialog</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/moveDialog.js"></script> <style type="text/css"> .win{ width:300px; height:300px; background:#658CCD; position:absolute; left:0; top:0; display:none; } .wTop{ height:30px; width:100%; cursor:move; } .content{ height:260px; width:95%; margin:0 auto; border:1px solid #000000; background:white; } </style> </head> <body> <button id="show">顯示</button> <button id="hidden">隱藏</button> <div class="win"> <div class="wTop"><p style="float:right;margin:5px 5px 0px 0px;color:white">X</p></div> <div class="content"></div> </div> </body> </html>
js程式碼為：
// JavaScript Document // 拖動視窗 $(document).ready(function(){ //初始化位置 initPosition(); //拖拽 dragAndDrop(); //點選按鈕 clickShowBtn(); }); //拖拽 function dragAndDrop(){ var _move = false;//移動標記 var _x,_y;//滑鼠離控制元件左上角的相對位置 $(".wTop").mousedown(function(e){ _move = true; _x = e.pageX - parseInt($(".win").css("left")); _y = e.pageY - parseInt($(".win").css("top")); }); $(document).mousemove(function(e){ if(_move){ var x = e.pageX - _x;//移動時滑鼠位置計算控制元件左上角的絕對位置 var y = e.pageY - _y; $(".win").css({top:y,left:x});//控制元件新位置 } }).mouseup(function(){ _move=false; }); } //初始化拖拽div的位置 function initPosition(){ //計算初始化位置 var itop = ($(document).height()-$(".win").height())/2; var ileft = ($(document).width()-$(".win").width())/1.8; //設定被拖拽div的位置 $(".win").css({top:itop,left:ileft}); } //點選顯示移動框 function clickShowBtn(){ $("#show").click(function(){ $(".win").show(); }); //點選隱藏移動框 $("#hidden").click(function(){ $(".win").hide(); }); }
js遮蓋層
js程式碼為：
$(document).ready(function(){ // 啟動 // startCovered(); // 結束 // endCovered(); $("#dianji").click(function(){ startCovered(); }); $("#qudiao").click(function(){ endCovered(); }); }); function startCovered(){ var documentWidth = $(document).width(); var documentHeight = $(document).height(); var coveredCss = 'position:absolute;'; coveredCss += 'top:0px;'; coveredCss += 'left:0px;'; coveredCss += 'z-index:1000;'; coveredCss += 'width:' + documentWidth + 'px;'; coveredCss += 'height:' + documentHeight + 'px;'; coveredCss += 'background-color:#000;'; coveredCss += 'filter:alpha(opacity=50);'; coveredCss += '-moz-opacity:0.5;'; coveredCss += 'opacity: 0.5;'; var coverFloor = '<div style="' + coveredCss + '" id="coveredDIV" name="coveredDIV"></div>'; $("body").append(coverFloor); } function endCovered(){ $("#coveredDIV").remove(); }