• JavaScript的弹出框和Bootstrap的警告框和模态框

      JavaScript弹出框

    警告框alert

    （常用于消息提示，比如注册成功等等）

    		 
    <script>
function register(){
   alert("注册成功");
}
</script>
  
<button onclick="register()">注册</button>
    View Code

    确认框 confirm

    (常用于危险性操作的确认提示。)

    		 
    <script>
function del(){
   var d = confirm("是否要删除");//确认框
   alert(typeof d + " " + d); //警告框
}
</script>
  
<button onclick="del()">删除</button>
    View Code

      输入框prompt

    (用于弹出一个输入框，供用户输入相关信息)

    		 
    <script>
function p(){
   var name = prompt("请输入用户名:");//输入框
   alert("您输入的用户名是:" + name);//警告框
}
</script>
  
<button onclick="p()">请输入用户名</button>
    View Code
      Bootstrap的警告框

    警告框

    class ="alert  alert-warning"   
    role  ="alert" 
    class="alert  alert-warning"   role="alert"   //警告提示
                  //alert-info                  信息提示
                  //alert-success               操作成功提示
                  //alert-danger                危险提示
    <div class="alert alert-warning" role="alert">警告提示</div>

     可关闭的警告框

    class ="alert  alert-warning  alert-dismissible"   
    role  ="alert"
    type="button"  class="close"  
    data-dismiss="alert"  aria-label="Close"

    aria-hidden="true"  &times;
    		   
    <div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button"  class="close"  data-dismiss="alert"  aria-label="Close">
         <span aria-hidden="true">&times;</span>
    </button>
    警告提示
</div>

     警告框中的链接

     href="#nowhere"   class="alert-link"
    		   
    <div  class="alert alert-success"   role="alert">
    <span>大减价！！！</span>
    <a   href="#nowhere"   class="alert-link">点击购买</a>
</div>
      Bootstrap的模态框

    静态模态窗口

    data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

    属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

    		 
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">
                 <span aria-hidden="true">×</span>
                 <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title">提问</h4>
          </div><!-- /.modal-header -->
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>!-- /.modal-body -->
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div><!-- /.modal-footer -->
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    View Code

    点击弹出

    data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

    .modal，用来把 <div> 的内容识别为模态框。

    .fade 。当模态框被切换时，它会引起内容淡入淡出。

    aria-labelledby="myModalLabel"，该属性引用模态框的标题。

     

    		   
    <button   type="button"    class="btn btn-primary"    
              data-toggle="modal"          data-target="#myModal">
              提问（点击弹出模态窗口）
</button>
//通过 data 属性：在控制器元素（比如按钮或者链接）上
//设置属性 data-toggle="modal"，
//同时设置 data-target="#identifier" 或 href="#identifier" 4
//来指定要切换的特定的模态框（带有 id="identifier"）。
    <div  class="modal fade"   id="myModal"   tabindex="-1"   
         role="dialog"           aria-labelledby="myModalLabel">
</div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 提问（点击弹出模态窗口）
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">提问</h4>
          </div>
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>
 
<div style="height:200px"></div>
    View Code

    不要动画效果de点击弹出

    去掉fade

    		   
    <div  class="modal "   id="myModal"   tabindex="-1"   
         role="dialog"           aria-labelledby="myModalLabel">
</div>

    点击空白不会收起

    添加属性data-backdrop="static"

    		   
    <div   class="modal fade"    id="myModal"     data-backdrop="static" 
          tabindex="-1"           role="dialog"   
          aria-labelledby="myModalLabel">
</div>

    使用JS控制模态窗口

    .modal('show');手动打开模态框。
    .modal('hide');手动隐藏模态框。
    .modal('toggle');手动切换模态框。
     
     
    		   
    <button  class="btn btn-default"  id="open">   打开模态窗口</button>
<button  class="btn btn-default"  id="close">  关闭模态窗口</button>
<button  class="btn btn-default"  id="toggle"> 切换模态窗口</button>
    <div    class="modal fade"    id="myModal" tabindex="-1"     role="dialog"    
            aria-labelledby="myModalLabel">
...
</div>
    $(function(){
   $("#open").click(function(){
      $("#myModal").modal('show');
   });
   $("#submit").click(function(){
      alert("信息已经提交");
      $("#myModal").modal('hide');
   });
   $("#toggle").click(function(){
      $("#myModal").modal('toggle');
   });
});
    <script>
$(function(){
   $("#open").click(function(){
      $("#myModal").modal('show');
   });
   $("#submit").click(function(){
      alert("信息已经提交");
      $("#myModal").modal('hide');
   });
   $("#toggle").click(function(){
      $("#myModal").modal('toggle');
   });
});
</script>
 
<button  class="btn btn-default" id="open"> 打开模态窗口</button>
<button class="btn btn-default"  id="close"> 关闭模态窗口</button>
<button class="btn btn-default"  id="toggle"> 切换模态窗口</button>
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">提问</h4>
          </div>
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" id="submit" type="button">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>
  
<div style="height:200px"></div>
    View Code

    监听模态的变化

    事件show.bs.modal：在调用 show 方法后触发。
    事件shown.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。
    事件hide.bs.modal：当调用 hide 实例方法时触发。
    事件hidden.bs.modal：当模态框完全对用户隐藏时触发。
    		   
    $(function(){
    $("#myModal").on("show.bs.modal",function(){
      alert("开始显示模态窗口");
    });
    $("#myModal").on("shown.bs.modal",function(){
      alert("显示模态窗口完毕");
    });
    $("#myModal").on("hide.bs.modal",function(){
      alert("开始隐藏模态窗口");
    });
    $("#myModal").on("hidden.bs.modal",function(){
      alert("隐藏模态窗口完毕");
    });
});
    <script>
$(function(){
    $("#myModal").on("show.bs.modal",function(){
      alert("开始显示模态窗口");
    });
    $("#myModal").on("shown.bs.modal",function(){
      alert("显示模态窗口完毕");
    });
    $("#myModal").on("hide.bs.modal",function(){
      alert("开始隐藏模态窗口");
    });
    $("#myModal").on("hidden.bs.modal",function(){
      alert("隐藏模态窗口完毕");
    });
});
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 提问（点击弹出模态窗口）
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">提问</h4>
          </div>
          <div class="modal-body">
            <p>问题描述</p>
            <textarea class="form-control"></textarea>
          </div>
          <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
            <button class="btn btn-primary" type="button">提交</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div>
  
<div style="height:200px"></div>
    View Code
  • 相关阅读:
    Word Frequency
    House Robber(动态规划)
    链表的排序 时间复杂度O（nlogn）
    gdb调试（转）
    c实现的trim函数
    c实现的trim函数
    mac下安装pyQt4
    哈夫曼编码详解
    IOS7--javascriptcore中jscontext使用要注意的一点
    Docker mysql 连接 “The server requested authentication method unknown to the clien”错误
  • 原文地址：https://www.cnblogs.com/Strugglinggirl/p/13124399.html
Copyright © 2020-2023  润新知