首頁 > 其他

Jquery彈出div js背景陰影 js彈出div js div 拖動，div拖拽效果 div置中

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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>
    <title>DragnDrop Demo</title>
    <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.dragndrop.js"></script>
    <style type="text/css">
        *{
            padding:0px;
            margin:0px auto;
        }   
    </style>
    <script type="text/javascript">
        //這個函數主要的功能計算頁面的大小，螢幕的大小，傳回值為Array,不必要細讀，傳回值為一個Array
         function ___getPageSize() { 
             var xScroll, yScroll; 
             if (window.innerHeight && window.scrollMaxY) {   
                 xScroll = window.innerWidth + window.scrollMaxX; 
                 yScroll = window.innerHeight + window.scrollMaxY; 
             } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
                 xScroll = document.body.scrollWidth; 
                 yScroll = document.body.scrollHeight; 
             } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
                 xScroll = document.body.offsetWidth; 
                 yScroll = document.body.offsetHeight; 
             } 
             var windowWidth, windowHeight; 
             if (self.innerHeight) { // all except Explorer 
                 if(document.documentElement.clientWidth){ 
                     windowWidth = document.documentElement.clientWidth;  
                 } else { 
                     windowWidth = self.innerWidth; 
                 } 
                 windowHeight = self.innerHeight; 
             } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
                 windowWidth = document.documentElement.clientWidth; 
                 windowHeight = document.documentElement.clientHeight; 
             } else if (document.body) { // other Explorers 
                 windowWidth = document.body.clientWidth; 
                 windowHeight = document.body.clientHeight; 
             }    
             // for small pages with total height less then height of the viewport 
             if(yScroll < windowHeight){ 
                 pageHeight = windowHeight; 
             } else {  
                 pageHeight = yScroll; 
             } 
             // for small pages with total width less then width of the viewport 
             if(xScroll < windowWidth){    
                 pageWidth = xScroll;         
             } else { 
                 pageWidth = windowWidth; 
             } 
             arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight); 
             return arrayPageSize; 
         }; 

         function showProc(){
              var message_box = document.getElementById("message_box");
              message_box.style.visibility='visible';
             // message_box.style.left =
              var pageSize = ___getPageSize();//這裡的方法 返回的是頁面的寬度，頁面的高度，螢幕的高度，螢幕的寬度!
           
              var pageWidth =  pageSize[0];//頁面的寬度
              var pageHeight = 406;//頁面的高度
              var ScreenWidth = pageSize[2];//螢幕的寬度
              var ScreenHeight = pageSize[3];//螢幕的高度
              var divWidth = 400;//div的寬度
              var divHeight = 250;//div 的高度
              message_box.style.width = divWidth+"px";//設定div 的寬度
              message_box.style.height = divHeight+"px";//設定div的高度
             
              message_box.style.left = (ScreenWidth-divWidth)/2+"px";//彈出div層螢幕中水平置中的位置
              message_box.style.top = (ScreenHeight-divHeight)/2+"px";//彈出div層螢幕垂直置中的位置
              //message_box.style.top = (ScreenHeight-pageHeight+divHeight)/2+"px";//彈出div層，所屬上一層div置中的位置,本執行個體中就為contentDiv高度一半的位置
              //alert(pageSize) 列印的資料可以看出ScreenHeight 和PageHeight的高度是一樣的，可能__getPageSize計算螢幕或者頁面的高度有問題!所以關於div垂直置中的問題，請大家手動解決
              //建立灰色背景層
              procbg = document.createElement("div");
              procbg.setAttribute("id","mybg");
              procbg.style.background = "#000";
              procbg.style.width = "100%";
              procbg.style.height = "100%";
              procbg.style.position = "absolute";
              procbg.style.top = "0";
              procbg.style.left = "0";
              procbg.style.zIndex = "500";
              procbg.style.opacity = "0.3";
              procbg.style.filter = "Alpha(opacity=30)";
              //背景層加入頁面
              document.body.appendChild(procbg);
              document.body.style.overflow = "hidden";
             }
             //拖動
              $().ready(function() {
                  $('#message_box').Drags({
                      handler: '#dragDiv',               
                      zIndex:200,
                      opacity:.9
                  });
         });
     function closeProc(){
         var message_box = document.getElementById("message_box");
        message_box.style.visibility='hidden';
        procbg.style.visibility = "hidden";
     }

    </script>
</head>
<body>
    <div style="width:100%;height:200px;background-color:#666;line-height:200px;text-align:center;"><h1>網頁TOP</h1></div>

    <!--彈出的div 要在 id=contentDIV內置中-->
    <div style="width:900px;height:600px;border:1px solid red;" id="contentDIV">
        <span><input type="button" onclick="showProc()" value="彈出DIV層"/></span>
        <!-- 背景濾鏡的效果 -->
        <div id="message_box" style="position:absolute;border:1px solid #666;z-index:1000;visibility:hidden">
             <div id= "message" style="width:100%; height:100%;background:#fff; color:#036; font-size:12px; line-height:150%;">
                 <!-- DIV彈出狀態行：標題、關閉按鈕 -->
                 <div style="background:#666;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px; padding:3 5 0 5; color:#fff ; height:30px; line-height:30px;" id="dragDiv">

                    <span style="width:150px;position:absolute;font-size:12px;">&nbsp;&nbsp;產品選擇介面</span>
                    <span onclick="closeProc();" style="float:right;cursor:pointer;font-size:22px;">×</span>

                </div>
                    <form action="#" method="post">
                         具體內容，可以是表格也可以是DIV<br/><br/><br/>
                         註明:本執行個體是從網上找的三個執行個體，自己整合的產品，所有權不歸本人所有，不懂的可以加QQ:82839618 共同學習!
                     </form>
             </div><!-- message -->
        </div><!-- message_box -->
    </div>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More