how2j.cn

效果 说明 示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

      <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 -->
静态模态窗口
示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></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>
点击弹出
示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 提问(点击弹出模态窗口)
</button>
<div class="modal " 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>
不要动画效果
示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
 提问(点击弹出模态窗口)
</button>
<div class="modal fade" id="myModal"  data-backdrop="static" 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>
点击空白不会收起
示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<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>
使用JS控制模态窗口
示例代码
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<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>
监听模态的变化
示例代码
示例 1 : 静态模态窗口   
示例 2 : 点击弹出   
示例 3 : 不要动画效果   
示例 4 : 点击空白不会收起   
示例 5 : 使用JS控制模态窗口   
示例 6 : 监听模态的变化   

示例 1 :

静态模态窗口

静态模态窗口
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <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 -->


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

点击弹出

点击弹出
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

不要动画效果

不要动画效果
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 提问(点击弹出模态窗口) </button> <div class="modal " 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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

点击空白不会收起

点击空白不会收起
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 提问(点击弹出模态窗口) </button> <div class="modal fade" id="myModal" data-backdrop="static" 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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

使用JS控制模态窗口

使用JS控制模态窗口
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

监听模态的变化

监听模态的变化
运行效果
<!DOCTYPE html> <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> <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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-04-07 这一块儿好难啊
youfei
标签这么多,理解不了,也记不住。。








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-04-01 老师,模态窗口和背景一样了
haha1996



老师,我在做项目时,想用模态窗口,但是模态窗口和背景都是灰的,也不能输入内容和关闭模态窗口,不知道您以前遇到过这样的问题没有啊

							

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-01-20 不明白的标签
2017-12-06 关于给submit添加模态对话框
2017-12-06 请问怎样给submit添加模态对话框
2017-10-17 emmmm
2017-09-05 怎么实现模态框在数据提交完成后消失
2017-08-25 关于模态框的ESC退出
2017-08-02 button标签
2017-07-22 aria-hidden="true"
2017-03-10 为啥例子里面都是没有html 和bod标签的,并且srcirpt标签写在不同的地方代表的意思不一样吧,希望楼主可以说的更详细写,万分感激
2017-03-07 不明白这里的点击空白
2017-03-07 不是说点击是没有动画效果的,但是一样的代码出来效果是有动画效果的




提问之前请登陆
关于 前端基础-BootStrap-模态窗体 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图