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

Posted Strugglinggirl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

 

以上是关于JavaScript的弹出框和Bootstrap的警告框和模态框的主要内容，如果未能解决你的问题，请参考以下文章

正常的 Bootstrap 弹出框和 Angular 应用程序在一页中 - 弹出框不起作用

Bootstrap：模态框上的弹出框

Twitter Bootstrap 弹出框不适用于动态生成的内容

Bootstrap 4 - 复选框在 Bootstrap 模式的弹出框内无法正常工作

如何使用 Twitter Bootstrap 中的弹出框显示图像？

bootstrap的表单验证的弹出框是怎么实现的