Bootstrap模式弹出窗口不可点击

Onichan 发表于 Dev

Onichan

使用Bootstrap添加模式弹出窗口。单击触发按钮后，模态变暗且不可单击。知道是什么原因造成的或在哪里看？

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>

application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require miracle/jquery.noconflict
//= require miracle/modernizr.2.8.3.min
//= require miracle/jquery-migrate-1.2.1.min
//= require miracle/jquery-ui.1.11.2.min
//= require bootstrap
//= require turbolinks
//= require magnific-popup/jquery.magnific-popup.min
//= require miracle/jquery.stellar.min
//= require miracle/waypoints.min
//= require owl-carousel/owl.carousel.min
//= require jquery.sky.carousel/jquery.sky.carousel-1.0.2
//= require miracle/jquery.plugins
//= require miracle/main
//= require_tree .

锡夫诺斯

有时，更改z-index可能会使Bootstrap混乱，因此，正如他们在Bootstrap文档中所说，请尝试将代码块放在页面顶部。如果您可以在应用程序的许多位置访问该模式，则可以将其部分放置，然后app/views/layouts/application.html.erb像这样调用它（很抱歉，这是一个苗条的模板，请告诉我您是否需要erb翻译）：

doctype html
html
  head
    == render 'layouts/meta'

    = stylesheet_link_tag …
    = javascript_include_tag …
    = csrf_meta_tags

  body

    == render 'path/to/your/modal'

    .container
      == yield

    == render 'layouts/footer'

否则，您可以尝试对自己的商品进行特殊处理<%== yield :modal %>，application.html.erb并使用`<％-content_for：modal％>从其他地方调用它。不确定此处的erb语法。在这里解释：使用内容作为方法

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-22

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

Bootstrap模式弹出窗口不可点击

Bootstrap模式弹出窗口不可点击

Vanilla Bootstrap Navbar链接不可点击

BOOTSTRAP GRID：链接不可点击

从Bootstrap弹出窗口调用模式

从Bootstrap弹出窗口调用模式

按钮不可点击

ListView不可点击

链接不可点击

使项目不可点击

Bootstrap分页正在删除href，使链接不可点击

类似于Bootstrap 3中按钮的不可点击对象

Bootstrap分页正在删除href，使链接不可点击

Bootstrap 表单输入字段和按钮不可点击

Bootstrap模式弹出窗口不显示

MVC 5编辑Bootstrap模式弹出窗口

Bootstrap模式弹出窗口显示页面内容

Bootstrap Modal-使背景可点击而不关闭模式

可点击的链接+弹出菜单

添加了一个带有引导程序的可点击弹出窗口，但每个弹出窗口都是相同的

如何使按钮不可点击

Listview项不可点击

如何使ImageButton不可点击

如何使imagePreview不可点击

使只读字段不可点击

JavaScript使按钮不可点击

href链接不可点击

如何使imagePreview不可点击

ImageButton不可点击-AndroidStudio

使选择框不可点击

WxPython BitmapButton不可点击