点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框。
效果图:
源码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>My Test Document</title> <style> .box{ width:50%; margin-top:10%; margin:auto; padding:28px; height:350px; border:1px #111 solid; display:none; /* 默认对话框隐藏 */ } .box.show{display:block;} .box .x{ font-size:18px; text-align:right; display:block;} .box input{width:80%; font-size:18px; margin-top:18px;} </style> </head> <body> <!-- 如果你的对话框 不仅是消息提示,是有输入(与用户有交互),建议自定义一个对话框,即先预订一个对话框,隐藏起来,需要时打开。 --> <h2>测试</h2> <input type="button" onClick="msgbox(1)" value="点击弹出输入框"> <script> function msgbox(n){ document.getElementById('inputbox').style.display=n?'block':'none'; /* 点击按钮打开/关闭 对话框 */ } </script> <div id='inputbox' class="box"> <a class='x' href=''; onclick="msgbox(0); return false;">关闭</a> <input type="text"> <input type="text"> <input type="button" value="确定"> </div> </body>
作者:Joanna.Yan
出处:http://www.cnblogs.com/Joanna-Yan/
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。