JQuery 彈出視窗，(div顯示與隱藏)，隱藏層半透明
阿新 • • 發佈：2019-02-16
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #bgDiv { /*隱藏背景層*/ position: absolute; /*絕對定位*/ left: 0px; top: 0px; background-color: black; opacity: 0.2; /*設定不透明度，即可以看到層下面的內容，但是由於層的遮擋，背景是不可以進行操作的*/ display: none; } #fgDiv { /*隱藏邏輯業務視窗層*/ position: absolute; /*絕對定位*/ width: 300px; height: 100px; border: 1px solid red; background-color: #e7e7e7; display: none; } </style> <script src="scripts/jquery-1.7.1.min.js"></script> <script> $(function () { //顯示按鈕點選，顯示隱藏層 $('#btnShow').click(function(){ //顯示隱藏層 $('#bgDiv').css('display', 'block') //遮擋背景層(半透明) .width(window.innerWidth+"px") .height(window.innerHeight+"px"); $('#fgDiv').css('display', 'block') .css('left',(window.innerWidth-300)/2+"px") .css('top',(window.innerHeight-100)/2+"px"); //邏輯業務視窗 }); //點選視窗儲存按鈕，隱藏 $('#btnSave').click(function(){ //隱藏層 隱藏起來。 $('#bgDiv').css('display', 'none'); //遮擋背景層(半透明) $('#fgDiv').css('display', 'none'); //邏輯 新增/修改 介面 }); }); </script> </head> <body> <table border="1" width="600" height="200" cellspacing="0" > <tr> <td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td> </tr> </table> <input type="button" id="btnShow" value="顯示" /> <!--隱藏層在最頂層，放在最後--> <div id="bgDiv"> <!--隱藏層，背景遮擋層(半透明)--> </div> <div id="fgDiv"> <!--隱藏層，邏輯業務視窗層--> <input type="hidden" id="hidId"/> 編號：<input type="text" id="txtId"/> <br/> 國家：<input type="text" id="txtCountry"/> <br/> 首都：<input type="text" id="txtCapital"/> <br/> <input type="button" id="btnSave" value="儲存"/> </div> </body> </html>