如何製作彈出視窗
阿新 • • 發佈：2019-02-10
彈出視窗十分的常用，下面是最常用的三種彈出視窗方式：
//第一種 //彈出對話方塊並輸出一段提示資訊 alert("提示資訊！"); //第二種 //彈出一個詢問框，有確定和取消按鈕 //利用對話方塊返回的值 （true 或者 false） if (confirm("你確定提交嗎？")) { alert("點選了確定"); } else{ alert("點選了取消"); } //第三種 //彈出一個輸入框 var name = prompt("請輸入您的名字", ""); //這裡會將輸入的內容賦給變數 name //這裡需要注意的是，prompt有兩個引數，前面是提示的話，後面是當對話框出來後，在對話方塊裡的預設值 //我們可以把輸入的內容打印出來 alert("歡迎您：" + name)
下面是使用jQuery來製作自定義的彈框,實際上大部分的UI彈窗都是基於下面的方法拓展演化出來的。基本原理如下：
1.定義一個DIV，定義好其寬度和高度。在這個DIV中寫自己要展示的內容。
2.設定CSS隱藏上面的DIV。
3.使用jQuery控制顯示隱藏的DIV並用絕對定位設定DIV的位置，使其顯示在我們設定好的位置。
4.設定z-index屬性將DIV顯示在頁面最前面。
下面是帶有遮罩層的彈出窗程式碼示例：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <link rel="stylesheet" href="tankuang.css"> <script src="jquery.js"></script> <script type="text/javascript"> $(function() { var oBtn = $('#show'); var popWindow = $('.popWindow'); var close = $('.popWindow h3 span'); //瀏覽器可視區域的寬度 var browserWidth = $(window).width(); //瀏覽器可視區域的高度 var browserHeight = $(window).height(); //瀏覽器縱向滾動條距離上邊界的值 var browserScrollTop = $(window).scrollTop(); //瀏覽器橫向滾動條距離左邊界的值 var browserScrollLeft = $(window).scrollLeft(); //彈出視窗的寬度,outerWidth設定為true計算時會把padding,border和margin計算進去 var popWindowWidth = popWindow.outerWidth(true); //彈出視窗的高度 var popWindowHeight = popWindow.outerHeight(true); //left的值＝瀏覽器可視區域的寬度／2－彈出視窗的寬度／2+瀏覽器橫向滾動條距離左邊界的值 var positionLeft = browserWidth / 2 - popWindowWidth / 2 + browserScrollLeft; //top的值＝瀏覽器可視區域的高度／2－彈出視窗的高度／2+瀏覽器縱向滾動條距離上邊界的值 var positionTop = browserHeight / 2 - popWindowHeight / 2 + browserScrollTop; var maskDiv ='<div class="maskDiv" ></div>'; //遮罩層的寬度 var masWidth = $(document).width(); var masHeight = $(document).height(); //當瀏覽器大小發生改變時計算改變彈出視窗的位置 $(window).resize( function() { if(popWindow.is(':visible')){//當popWindow是可見的時候設定變化 browserWidth = $(window).width(); browserHeight = $(window).height(); positionLeft = browserWidth / 2 - popWindowWidth / 2 + browserScrollLeft; positionTop = browserHeight / 2 - popWindowHeight / 2 + browserScrollTop; //重新設定彈出窗的位置，使其位置隨瀏覽器大小變化而變化 popWindow.css({ 'left' : positionLeft + 'px', 'top' : positionTop + 'px' }); masWidth = $(document).width(); masHeight = $(document).height(); //重新設定遮罩層寬高，使其寬高隨瀏覽器大小變化而變化 $(".maskDiv").width(masWidth).height(masHeight); } }); //滾動滾動條時計算改變彈出視窗的位置 $(window).scroll( function() { if(popWindow.is(':visible')){ browserScrollTop = $(window).scrollTop(); browserScrollLeft = $(window).scrollLeft(); positionLeft = browserWidth / 2 - popWindowWidth / 2 + browserScrollLeft; positionTop = browserHeight / 2 - popWindowHeight / 2 + browserScrollTop; //重新設定彈出層的位置，使其位置隨著滾動條滾動改變 popWindow.css({ 'left' : positionLeft + 'px', 'top' : positionTop + 'px' }); } }); //當滑鼠點選彈出按鈕時觸發 oBtn.click(function() { //設定彈出窗的位置 popWindow.show().animate({ 'left' : positionLeft + 'px', 'top' : positionTop + 'px' }, 500); //頁面增加遮罩層 $('body').append(maskDiv); //設定遮罩層的寬高 $(".maskDiv").width(masWidth).height(masHeight); //設定遮罩層的樣式 $(".maskDiv").css({ 'left' : '0px', 'top' : '0px', 'z-index' : '1', 'position' : 'absolute', 'opacity' : '0.4', 'height' : masHeight + 'px', 'width' : masWidth + 'px', 'background-color' : 'black' }); //也可以在css中定義 }); //當滑鼠點選關閉時觸發 close.click(function() { //隱藏彈出層，還原彈出層的位置 popWindow.hide().animate({ 'left' : '0px', 'top' : '0px' }, 0); //將遮罩層程式碼從頁面中刪除 $(".maskDiv").remove(); }); }); </script> </head> <body style="width:2000px"> <br /> <a href="javascript:;" id="show">顯示視窗</a> <div class="popWindow hide"> <h3> 彈出視窗的標題<span>關閉</span> </h3> <div class="content" id="content">彈出視窗的內容</div> </div> </body> </html>
css部分：
不要忘記引入jquery.js，如果有疑問可以留言哈~！.popWindow{ width:500px;/* 設定彈出視窗的寬度 */ height:500px;/* 設定彈出視窗的高度 */ background-color: buttonface; left:0px; top:0px; position: absolute;/* 設定彈出視窗為絕對定位，這樣後面設定位置才會起效 */ z-index: 2; } .popWindow h3{/* 設定彈出視窗的標題欄的樣式 */ height:30px; line-height:30px; margin:0; padding:0; } .hide{/* 隱藏 彈出視窗DIV*/ display: none; } .popWindow h3 span{ float: right; font-size: 14px; font-weight:bold; cursor: pointer; margin-right: 5px; } .popWindow h3 span:HOVER{ color: red; } .popWindow .popWindowcontent{ height: 470px; background-color:white; } /* 設定遮罩層的樣式，如果在這裡設定則js中設定css樣式部分可以省去 */ .maskDiv{ background-color: black; opacity:0.4; position: absolute; top: 0px; left: 0px; z-index: 1; }