标签: bootstrap-modal

我想使用带哈希的URL来调用特定的Bootstrap模式.换句话说,用户在page1上并点击指向page2 #hash的链接,并在加载page2时加载#hash模态.我已经根据我在其他Q/As中读到的内容尝试了很多变化,但没有任何效果.我对JS没有任何经验,所以我很感激一些帮助!

这就是我所拥有的:

第1页上的链接: <a href="/page2#myModal>

第2页上的HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
  ...
</div>

第2页的Javascript:

<script>
  if(window.location.hash) {
    var hash = window.location.hash;
    $("'" + hash + "'").modal('toggle');
  }
</script>

顺便提一下,<a href="#" data-toggle="modal" data-target="#myModal">当用户实际上在第2页时,可以正常调用模态.

我在这里遇到一些问题,需要一些帮助.我认为这很容易,但我无法弄清楚自己发生了什么.请看下面的小提琴:

小提琴

当我只打开模态并第一次点击它时.它正常工作,但是当我重新打开它时,就会出现问题.它不止一次触发on click事件.

HTML

<button data-target="#mergeFieldsModal" data-toggle="modal" data-message-id="#message" class="btn btn-info">Open Modal</button>
<div id="result"></div>

<div id="mergeFieldsModal" class="modal fade">
  <div class="modal-dialog">
    <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>
        <h3 class="modal-title"><span class="ss-shuffle ss-icon"></span> Merge Fields</h3>
      </div>
      <div class="modal-body">
        <p>Click Add. After clicking add, open the modal again then click add again to see the problem.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="btnMergeField" class="btn btn-primary">Add</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- …

我正在尝试将我的模态的背景设置更改为"静态"作为对事件的响应,以便它变得不可忽略.我$('#myModal').modal({ backdrop: 'static',keyboard:false })在点击模态内的按钮后设置了这个,没有运气.

我想要的效果类似于nakupanda的bootstrap-dialog的效果(参见Manipulating Buttons部分,当dialog.setClosable(true);点击'Click to disable and spin'按钮触发时,模态不再可关闭)

请看这个jsfiddle.

我知道这个问题已在这里提出,但它没有正确的答案.我知道这有可能以某种方式,但我无法分析nakupanda的代码.

我将这两个插件都包含在同一页面中，这会导致它们之间发生冲突。

我删除了 Bootstrap.min.js 并且 SimpleModal 工作正常。我删除了 jquery.simplemodal.js 并且 Bootstrap 模态工作正常。如果在 bootstrap.min.js 之前包含 jquery.simplemodal.js，我尝试调用 bootstrap modal

如果在 Bootstrap 之后包含 SimpleModal，我会在 Firebug 控制台上收到此错误

i.modal(...).one is not a function **..blah blah..** bootstrap.min.js (line 6)

我有两个选项卡第一个选项卡显示年龄小于 40 岁的员工的详细信息，第二个选项卡显示年龄大于 40 岁的员工的详细信息，当我单击第一个选项卡并单击按钮显示（小于 1st tab) 弹出为我在 bootstrap 中编写的表单生成。但是对于第二个选项卡，当我单击按钮时，它只会淡出，不会生成任何表单。当我使用 chrome 调试器时，我发现节点淡入淡出的 CSS 没有自动生成。我是 Bootstrap 的新手，请帮助我

<button  type="button"
    class="btn btn-info glyphicon glyphicon-plus"
    data-toggle="modal"
    data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
        Add URL
</button>

{{category.name}}{{$parent.$parent.$index}}{{$index}}

<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
     {{$parent.$parent.$index}} -- {{$index}}
     <div class="modal-dialog" role="document">
          <!-- Modal content-->
          <div class="modal-content" >{{category.name}}
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <div class="modal-body">
                  <form>
                      <p>
                          <input type="text" class="form-control"
                           name="uri" placeholder="Add URL" ng-model="uri">
                      </p>
                   </form>
               </div>
               <div class="modal-footer">
                   <button type="button" ng-click="addCustom()"
                           class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
                           data-dismiss="modal">Add</button>
                   <button …

我在我的项目中使用 React-bootstrap。我需要打开多个对话框。有没有办法实现这一目标？

注：有一个引导的答案在这里，但它不工作的反应，引导。谢谢。

我的 html 代码中有一个 for 循环来显示数据列表，当我Bootstrap Modal在这个循环中创建一个来为列表的每个元素显示它时。似乎模态仅适用于列表的第一个元素。

    {% for i in lb %}
    <button  class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">

                            <h4 class="modal-title">Ajouter Serveur</h4>
                        </div>
    <div class="modal-body">
                            <form method="post" class="loginForm">
                            <input type="hidden" name="lb" value="{{ i.Nom }}">
                            <h6>{% csrf_token %}
                                {{ form.as_table }}</h6>

                        <input type="submit" name="submit" class="btn btn-primary " value="Submit" />
                            </form>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        </div>

                        </div></div>

     {% endfor %}

标头应代表页面的结构并相应地嵌套。w3.org声明如下：

\n

固定页面部分的例外

\n

在页面的固定部分中，例如在侧边栏中，标题排名不应根据内容区域中的排名而变化。在这些情况下，页面之间的一致性更为重要。

\n

对于模式对话框来说也是如此吗？毕竟它们通常不是实际页面结构的一部分。我们应该为模式对话框使用哪个标题？

Bootstrap 似乎总是使用 h5s。

作为示例，我们在页脚中使用引导模式，它显示有关应用程序版本的附加信息：

<div id="v-modal" class="modal fade" tabindex="-1" role="dialog">\n  <div class="modal-content">\n    <div class="modal-header">\n      <h5 class="modal-title">Version</h5>\n    </div>\n    <div class="modal-body">\n      <p>Copyright \xc2\xa9 2020 Foobar</p>\n      <p>Version 1.3.7124.19131</p>\n    </div>\n    <div class="modal-footer">\n      <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>\n    </div>\n  </div>\n</div>\n

在我们最近收到的 a11y 测试中，这被标记为潜在问题。

我正在使用bootstrap 5制作一个简洁的画廊，我想知道如何在 HTML 中不使用“data-bs-...”的情况下触发 bootstrap 模式（以避免重复这些 data- 属性 50 次）。

我设法获得了源代码的完整功能 javascript，但 .modal() 函数和 .show() 函数似乎不起作用。事情是这样的：

function gallery(_src) {
var fullPath = _src;
var fileName = fullPath.replace(/^.*[\\\/]/, '');
var newSrc = "./assets/img/" + fileName;
document.querySelector("div#galleryModal img").src = "./assets/img/" + fileName;

document.getElementById("galleryModal").show(); }

我在最后一行 javascript 上被阻止了。目标：触发#galleryModal。

感谢您的阅读，感谢您的帮助！

我在我的项目中使用 BS modal。我正在使用按钮打开模型，但当我打开模式时，我在控制台中收到此错误。

错误：

modal.js:418 Uncaught TypeError: Cannot read properties of null (reading 'hide')
    at HTMLButtonElement.<anonymous> (modal.js:418:23)
    at HTMLDocument.s (event-handler.js:119:21)

HTML：

<div class="card my-2 mx-2 mt-4" style="width: 18rem;">
<button class="btn btn-primary" data-bs-target="#mymodal" data-bs-toggle="modal"  
style="position: absolute; bottom: 0; right: 0">Get Quote</button>
</div>

模态：

<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
DO SOMETHING
</div>
</div>
</div>
</div>

我正在使用 Bootstrap5 CDN：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>