模態對話框練習
阿新 • • 發佈：2018-02-08
idt closed mar aps elements cti bsp grey mov 
實現效果就跟網站註冊一樣，一點擊彈出一個框來
初始：
點擊按鈕後：
點擊cancle按鈕後回到第一個圖片狀態，這個框會隨鼠標上下滾動。
實現代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模態對話框</title> <style> .d1{ background-color: #2aabd2; height: 2000pxView Code; } .shade{ position: fixed; /*脫離文檔流，參照物是可視窗口。 可以設置top/bottom/left/right*/ top: 0; bottom: 0; left: 0; right: 0; background-color: grey; opacity: 0.4; /*規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）*/ } .models{position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; background-color: #8a6d3b; border-color: red; border-style: solid; } .hide{ display: none; } .d2{ position: fixed; top: 50%; left: 50%; } </style> </head> <body> <div> <div id="d1" class="d1"> <input class="c" type="button" value="click"> </div> <div class="shade hide handles"></div> <div id="d2" class="models hide handles"> <input class="c" type="button" value="cancle"> </div> </div> <script> var b_ele=document.getElementsByClassName(‘c‘) var hide_ele=document.getElementsByClassName(‘handles‘) for (j=0;j<b_ele.length;j++) { b_ele[j].onclick = function () { if(this.value == ‘click‘){ for (var i = 0; i < hide_ele.length; i++) { hide_ele[i].classList.remove(‘hide‘) } } else { for (var i = 0; i < hide_ele.length; i++) { hide_ele[i].classList.add(‘hide‘) } } } } </script> </body> </html>
模態對話框練習