在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决（bootstrap的模态框为什么没法弹出）

25-01-25 30

在本文中，我们将给您介绍关于在17-19课时，bootstrapjs没有加载导致模态框点不出来的问题及解决的详细内容，并且为您解答bootstrap的模态框为什么没法弹出的相关问题，此外，我们还将为您

在本文中，我们将给您介绍关于在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决的详细内容，并且为您解答bootstrap的模态框为什么没法弹出的相关问题，此外，我们还将为您提供关于4.17、Bootstrap V4 自学之路 ----- 组件 --- 模态框、4.17、Bootstrap V4自学之路-----组件---模态框、angularjs 与 bootstrap 模态框问题、bootstrap 3.3 模态框垂直居中问题的知识。

本文目录一览：

在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决（bootstrap的模态框为什么没法弹出）
4.17、Bootstrap V4 自学之路 ----- 组件 --- 模态框
4.17、Bootstrap V4自学之路-----组件---模态框
angularjs 与 bootstrap 模态框问题
bootstrap 3.3 模态框垂直居中问题

在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决（bootstrap的模态框为什么没法弹出）

我们在课程里演示了artisan preset命令切换前端框架，当然我们也提到了这个命令还存在一些bug，比如近期小伙伴们就发现，除了视频里演示的那个bug，还会发生：

（问题描述）

在artisan preset none以后再执行artisan preset bootstrap，就会导致bootstrap这个前端框架的js文件没有加载上，同时jQuery也没有加载上，从而导致我们课程中的模态框只是有css样式，但是点击并不会弹出模态框

（问题原因）

由于这个preset命令的bug，导致resources/js/bootstrap.js中下面这块代码没有被加上

try {
window.Popper = require(''popper.js'').default;
window.$ = window.jQuery = require(''jquery'');
require(''bootstrap'');
} catch (e) {}

可以看到这块的作用就是尝试加载bootstrap和jQuery相应的js文件

（问题解决）

如果你也遇到了上述问题，就在你的resources/js/bootstrap.js中加入上面的这块代码，然后再编译即可

总结

以上是小编为你收集整理的在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

原文地址：https://www.cnblogs.com/hakeer/p/11493100.html

4.17、Bootstrap V4 自学之路 ----- 组件 --- 模态框

由于 HTML5 定义了它的语义，autofocus HTML 属性在 Bootstrap 模态框中产生不了影响。为了实现同样的效果，使用一些自定义 JavaScript：

$(''#myModal'').on(''shown.bs.modal'', function () {
  $(''#myInput'').focus()
})

确保不要在一个模态框还可见的时候打开另一个模态框。在同一时候显示超过一个模态框，需要自定义代码。

尽可能把一个模态框的 HTML 代码始终放置在 document 的顶层位置，以避免别的组件影响模态框的外观以及功能。

这里有一些在移动设备上使用模态框的警告，欲知详情，请看浏览器支持文档。

静态例子

一个经渲染的模态框，带有头、主体，以及有一些操作功能的脚。

这段代码调试失败了，怎么也不显像。或许是缺少东西吧。

Modle 伪代码部分：

《div class="modal fade"》<br>
--| 《div class="modal-dialog" role="document"》<br>
--| --| 《div class="modal-content"》<br>
--| --| --| 《div class="modal-header"》<br>
--| --| --| --|《button class="class"》<br>
--| --| --| --|《h4 class="modal-title"》<br>
--| --| --| --|《.除了按钮和title应该就没了吧..》<br>
--| --| --| 《div class="modal-body"》<br>
--| --| --| --|《..主题内容.》<br>
--| --| --| 《div class="modal-footer"》<br>
--| --| --| --|《.一般是按钮..》

现场演示

利用 JavaScript，通过点击下面的按钮，切换一个模态框。它将从网页顶上滑下来，并淡入。

<!-- 按钮触发模型 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        《div 》 <br>
        --| 《div  role="document"》<br>
        --| --| 《div 》<br>
        --| --| --| 《div 》<br>
        --| --| --| --|《button 》<br>
        --| --| --| --|《h4 》<br>
        --| --| --| --|《.除了按钮和title应该就没了吧..》<br>
        --| --| --| 《div 》<br>
        --| --| --| --|《..主题内容.》<br>
        --| --| --| 《div 》<br>
        --| --| --| --|《.一般是按钮..》
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PS：出发模态框的按钮可以在 CSS 中，根据文档内容介绍，模态框的位置应该至于 html 最顶层。

二货的我放在了 <!DOCTYPE html> 上一行，结果 ID 不认。太二了。

理论应当放置于 <body> 下的第一行。

可选的尺寸

模态框有两种可选的尺寸，利用修饰类放在.modal-dialog 上就可用了。

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target="#Demo01">Large modal</button>

<div class="modal fade" id="Demo01" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        《div 》\
        --| 《div 》<!-- 在这里添加 modal-lg -->
        --| 《div 》
        --| --| 《 ... 只是想起来.modal-content里面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Demo02">Small modal</button>

<div class="modal fade" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
        《div 》\
        --| 《div 》<!-- 在这里添加 modal-sm -->
        --| 《div 》
        --| --| 《 ... 只是想起来.modal-content里面有  .modal-header modal-body modal-footer 。》
    </div>
  </div>
</div>

PS：背景图有第一个按钮的样子，是我忘记删掉了。另外第一个按钮为什么这么大呢？因为那个按钮使用了 .btn-lg 类。

PS：这里和文档代码不同，按钮的 data-target=". 类" 也可以是 "#id"

移除动画

如果模态框仅要求它出现，但是不要淡出淡入效果，只需从模态框标记上移除.fade 类。

<div class="modal" id="Demo02" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

请看最外层 class 属性中，.fade 类删掉了。效果就感觉稍微有些生硬了。

使用网格系统

为了在模态框中使用 Bootstrap 的网格系统，只需要在.modal-body 内部嵌套一个 container-fluid，然后在该容器中使用普通的网格系统类。

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
    Launch demo modal
</button>

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid bd-example-row">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
                <div class="col-xs-8 col-sm-6">
                  Level 2: .col-xs-8 .col-sm-6
                </div>
                <div class="col-xs-4 col-sm-6">
                  Level 2: .col-xs-4 .col-sm-6
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

PS：这里要注意的是，模态框内的.modal-body 里，加入 .container-fluid。

如果不加，直接使用.row。我感觉也没有什么不同。

基于触发按钮的多样化模态框

有几个按钮触发同样的模态框，只是内容有一些不同？使用 event.relatedTarget 以及 HTML 的data-* 属性根据点击的是哪个按钮，多样化模态框的内容。参阅 relatedTarget 以增进对模态框事件的了解。

<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            <span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">New message</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">Recipient:</label>
              <input type="text" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Message:</label>
              <textarea class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Send message</button>
        </div>
      </div>
    </div>
  </div>
</div>

不知道大家注意到没有，3 个按钮指向的都是同一个模态框。但如何区分呢？请看按钮上的 data-whatever 属性。data 可以通过 JS 取得。建议请看文档第一章起步的 javascript 小节。

高度不固定的模态框

如果一个模态框在打开时，高度发生变化，万一出现了滚动条，你必须调用$(''#myModal'').data(''bs.modal'').handleUpdate()以调整模态框的位置。

这里我想，如果实际用到的话，可以使用 JQ 监听。虽然可能性很小。

另外一种情况，<textarea> 标签可以设定 max-height。当超出 max-height 时 < textarea > 自身出现滚动条。

用途

模态框插件利用 data 属性或者 JavaScript，根据需要切换隐藏的内容。它还向 <body> 添加了.modal-open 类以覆盖默认的滚动行为，并生成一个.modal-backdrop 类以提供一个点击区域，当在模态框的外面点击就可以抹除显示的模态框。

利用 data 属性

不用写 JavaScript 也能激活一个模态框。在一个控件元素（比如说一个按钮）上设置 data-toggle="modal"，同时在添加一个 data-target="#foo" 或者 href="#foo" 以指向某一个模态框，就可以切换了。

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

利用 JavaScript

只需要一行 JavaScript 就可以对 id 为 myModal 的元素调用模态框。

$(''#myModal'').modal(options)

这里注意，这是一个泛指。options 应该有一个具体的值。

选项

选项可以通过数据属性或 JavaScript。对于数据属性，附加的选项名 data-，如在 data-backdrop=""。

名称	类型	默认值	描述
backdrop	布尔值或字符串 `static`	true	包括了一些 modal-backdrop 元素。作为替补，为一个 backdrop 指定值 `static`，单击的时候就不会关闭模态框。
keyboard	布尔值	true	在按下 Esc 键的时候关闭模态框。
show	布尔值	true	在初始化的时候显示该模态框。

方法

.modal(options)

把某块内容作为模态框激活。接受一个可选的参数 object。

$(''#myModal'').modal({
   keyboard: false 
})

.modal(‘toggle’)

人为切换一个模态框。在模态框真正显示或隐藏之前返回给调用者

（即，在 shown.bs.modal 或者 hidden.bs.modal 事件发生之前）。

$(''#myModal'').modal(''toggle'')

.modal(‘show’)

人为打开一个模态框。在模态框真正显示之前返回给调用者（即，在 shown.bs.modal 事件发生之前）。

$(''#myModal'').modal(''show'')

.modal(‘hide’)

人为隐藏一个模态框。在模态框真正隐藏之前返回给调用者（即，在 hidden.bs.modal 事件发生之前）。

$(''#myModal'').modal(''hide'')

事件

Bootstrap 的模态框类为模态框相关的回调函数提供了事件接口。所有的模态框事件都能由模态框自身触发。

事件类型	描述
show.bs.modal	当调用 `show` 实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为 Event 对象的 `relatedTarget` 属性。
shown.bs.modal	当模态框对用户来说可见时（需要等待 CSS 过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为 Event 对象的 `relatedTarget` 属性。
hide.bs.modal	当调用 `hide` 实例方法时，会立即触发该事件。
hidden.bs.modal	当模态框对用户来说终于完成隐藏时（需要等待 CSS 过渡完成），会触发该事件。
loaded.bs.modal	当模态框使用 `remote` 选项完成内容载入时，会立即触发该事件。

$(''#myModal'').on(''hidden.bs.modal'', function (e) {
   // do something... 
})

4.17、Bootstrap V4自学之路-----组件---模态框

总结

以上是小编为你收集整理的4.17、Bootstrap V4自学之路-----组件---模态框全部内容。

如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。

angularjs 与 bootstrap 模态框问题

李宜衡发现了一个问题，在用angularjs写的时候发现bootstrap的模态框在单页面跳转时不会自动关闭.
就是这样:
在点击模态框时会弹出:

但当你填写完信息点击保存时，切换视图后模态框并不会关闭

此时页面还是阴影状态且无法保存.

一开始虽然不知道为什么会这样，但既然他没有关闭，我就自己手动关闭看能不能解决.
去bootstrap的官网上看,有没有什么手动关闭弹出框的方法.找到了这个

bootstrap上面果然有关闭模态框的方法，但他是对dom的操作，于是我想写一个模态框指令，在点击保存时能够关闭模态框.

新建一个modal的指令,指令的模板从bootstrap上边拿的

一开始想的是当点击保存时，先把模态框关再就执行控制器传过来的方法，结果居然没有什么变化.

猜测可能是模态框没有成功关闭，可能时用法错误，但把控制器的方法注释掉之后，模态框确实成功关闭了.

有点奇怪，最后去控制台打了个断点，问题就找到了:

当点击保存时，由于我打了个断点，程序停止了，点击下一步直到程序运行到结尾

此时页面还是黑色的，就说明此时的模态框并没有关闭，再点击运行

一直点击到这步，模态框才关闭了，这说明了其实模态框关闭操作并不是立即执行的，他其实是一个异步操作.在模态框关闭操作还没完成时，页面就进行跳转了，导致模态框不能关闭，因为这是单页面，就导致了页面还是黑色的.

再回到bootstrap，仔细查找，发现确实有关闭成功后触发的事件

把控制器传过来的方法在关闭事件触发后再调用

最后解决了跳转后模态框不能关闭的问题.

bootstrap 3.3 模态框垂直居中问题

/* center modal */
function centerModals(){
    $(''.modal'').each(function(i){
        var $clone = $(this).clone().css(''display'', ''block'').appendTo(''body'');    var top = Math.round(($clone.height() - $clone.find(''.modal-content'').height()) / 2);
        top = top > 0 ? top : 0;
        $clone.remove();
        $(this).find(''.modal-content'').css("margin-top", top);
    });
}
$(''.modal'').on(''show.bs.modal'', centerModals);
$(window).on(''resize'', centerModals);

关于在17-19课时，bootstrap js没有加载导致模态框点不出来的问题及解决和bootstrap的模态框为什么没法弹出的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于4.17、Bootstrap V4 自学之路 ----- 组件 --- 模态框、4.17、Bootstrap V4自学之路-----组件---模态框、angularjs 与 bootstrap 模态框问题、bootstrap 3.3 模态框垂直居中问题的相关信息，请在本站寻找。

本文标签：