Javascript 引导模式加载但无响应_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导模式加载但无响应

javascript jquery html css twitter-bootstrap

Javascript 引导模式加载但无响应,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我已经读了很多关于这个主题的文章，但是没有一个能回答我所遇到的问题。我正在尝试创建一个跨页面宽度的模式视图覆盖。但是，模态渲染，但它没有响应。它变暗了，按钮不起作用。这是我加载资产的方式：  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> <!-- Custom CS

我已经读了很多关于这个主题的文章，但是没有一个能回答我所遇到的问题。我正在尝试创建一个跨页面宽度的模式视图覆盖。但是，模态渲染，但它没有响应。它变暗了，按钮不起作用。这是我加载资产的方式：

<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>

这是我在模态上运行的代码：

</head>
  <body>
    <!--  Modal    -->
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            <h3>Modal Body</h3>
          </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>

    <div class="container-fluid">
      <%= yield %>
    </div>    
  </body>
</html>


&时代；
情态标题
模态体
关
保存更改

这就是我想要它的来源。我想，因为我有一个动画效果，它可能会与事件发生冲突。请注意，这是收益率中的第一件事：

<div class="container-fluid">
    <div class="row"><div class="col-md-12"><h1>Title</h1></div>
          <div class="row">     
            <div class="col-md-3">
              <div class="menu-item-1 card effect_hover">  
                <a class="modal-link" data-toggle="modal" data-target="#basicModal">
                  <div class="card_front">
                    <span class="icon-home3 card_text"></span><br>ABOUT
                  </div>
                <div class="card_back">
                  <span class="card_text">Learn all about our community!</span> 
                </div>
               </a>
              </div>
             ...


标题

关于
了解我们的社区！
...

就这样。我已经通过Bootstrap阅读了文档，并将代码复制到页面中，但仍然存在相同的问题。我还尝试使用本地版本的引导资产。想法

我正在尝试创建一个跨页面宽度的模式视图覆盖

在这种情况下，您必须在bootstrap.CSS（不推荐）或自定义CSS文件中编辑下面的CSS行

这是一句话：

@media (min-width: 768px) {
  .modal-dialog {
    width: 100%;    // by default its 600px.
    margin: 30px auto;
  }

引导传送带是为响应而构建的，请参见屏幕截图：

在大屏幕上：

在较小的屏幕上：

你必须有一些内容内的模式，这是不是响应或更确切地说是一个固定的宽度

如果查看模式的样式，在中，您将看到：

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

宽度设置为自动，屏幕宽度为768或更大时除外，在这种情况下，宽度设置为

width:600px;

谢谢你的帮助。你知道为什么按钮在模态上不起作用吗？它们具有所需的属性，但屏幕仍然变暗（包括模式视图），并且“取消”不会退出视图。@user3162553，一旦模式弹出，有3种方法关闭模式，1。单击关闭按钮2。单击关闭“x”标记，3。点击半透明的黑色背景（这可以通过进入背景来禁用：

静态

）实际上，我想要的效果只是一个全屏覆盖。我认为模态是一种解决方案，但也许有更好的方法。这就是问题所在——关闭按钮和“x”标记对任何点击都没有反应。这就是为什么我认为这是一个脚本问题。我只是不知道问题出在哪里。@user3162553，你看到的覆盖就是这个，除了通过Jquery动态添加的。