模态对话框练习
<!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>