码迷，mamicode.com
首页 > 编程语言 > 详细

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

时间：2020-06-14 14:59:36      阅读：62      评论：0      收藏：0      [点我收藏+]

标签：index   rap   mes   type   dialog   prompt   dal   dial   display   

  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的警告框和模态框

标签：index   rap   mes   type   dialog   prompt   dal   dial   display   

原文地址：https://www.cnblogs.com/Strugglinggirl/p/13124399.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！