1. 程式人生 > >JavaScript練習 - 模態對話框

JavaScript練習 - 模態對話框

itl char charset move class cti val lan spa

模態對話框練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .hide{
            display: none;
        }
        .a1{
        }
        .a2{
            position
:fixed; left:0; top:0; right:0; bottom:0; background-color:black; opacity:0.6; z-index:9; } .a3{ width:500px; height:400px; background-color:white; position:fixed
; left:50%; top:50%; margin-left:-250px; margin-top:-200px; z-index:10; } </style> </head> <body> <div class="a1 "> <input type="button" value="按鈕" onclick="f1()"> </div> <div class
="a2 hide"></div> <div class="a3 hide"> <input type="button" value="按鈕" onclick="f2()"> </div> <script src="jquery-1.12.4.min.js"></script> <script> function f1() { $(.a2).removeClass(hide).parent().children(.a3).removeClass(hide); } function f2() { $(.a2).addClass(hide).parent().children(.a3).addClass(hide); } </script> </body> </html>

JavaScript練習 - 模態對話框