Bootstrap Modal，Modal无法正常工作

Bootstrap-Modal, Modal not working properly

本文关键字：Modal 常工作 工作 Bootstrap      更新时间：2023-09-26

我使用Bootstrap模态是因为我的客户认为Twitter Bootstrap的常规模态对他来说不够好。

因此，我成功地修改并重新创建了一个简单的测试，以使用全宽模态，隔离在一个单独的页面上。然而，当我将代码放入现有页面并单击模态时，我只得到一个白色覆盖。模态的内容在页面上，只是没有显示出来。

要么太晚了，要么我对javascript/css的了解不够。

页面/代码可在此处找到。在中间的右侧是一个蓝色的"查看演示"按钮。

http://dev.garadise.com/product/speakers1/1

如果你使用引导程序，那么你必须更改你的代码——你当前的代码是

<button class="demo btn btn-primary btn-large" data-toggle="modal" href="#full-width">View Demo</button>

删除href并放入datatarget="#full-width"，然后您的代码变成

<button class="demo btn btn-primary btn-large" data-toggle="modal" data-target="#full-width">View Demo</button>

查看此以获取更多信息

http://getbootstrap.com/javascript/#modals

好吧，我看到按钮上的当前代码是当前的数据目标，而不是href。我认为您已经在模态中添加了一个"隐藏"类。这就是当模态打开时隐藏它的原因。只需将其移除即可。

可能有以下两个问题：

  1. 不正确的css或css有错误
  2. 不正确的js或js有错误

当我还是引导程序的初学者时，我也遇到过同样的问题。只需从官方引导站点下载合适的css和js并使用即可。

相关文章：