zoukankan      html  css  js  c++  java
  • JS实现弹出层对话框

    点击按钮后,弹出层对话框,可交互,点击关闭后才关闭掉对话框。

    效果图:

    源码:

    <!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> 
  • 相关阅读:
    VMware虚拟机下实现NAT方式上网的小方法
    文件附件上传
    [转] 深入了解 HTML 5
    用JS获取图片尺寸
    Stream与byte的转换
    递归算法
    搞懂java中的synchronized关键字
    初学UML之用例图
    浅析tomcat nio 配置
    面向对象:单一任务原则(SRP)
  • 原文地址:https://www.cnblogs.com/Joanna-Yan/p/4822991.html
Copyright © 2011-2022 走看看