gpt4 book ai didi

javascript - Twitter Bootstrap 3 模式对话框不显示

转载 作者:行者123 更新时间:2023-12-03 09:33:01 25 4
gpt4 key购买 nike

我有一个 Twitter Bootstrap 模式,无法正确呈现对话框,我不知道为什么。

HTML

<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModal2Label">New Label</h4>
</div>
<div class="modal-body">
<p>Something for now.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

您可以在此页面上看到正在运行的 html:Superfood Picker单击首页上的“比较”按钮。

仅根据 html,我不明白为什么它不起作用。

其他相关点:

1).我在同一页面上有两个模式。

2).另一个工作正常。

3).当我将功能失调的模态的 ID 切换到正确显示的模态的 ID 时,该模态也会正确显示。

4).后一点对我来说可能是调用模态的 HTML 才是问题所在,但是当我比较两者时,我不明白为什么一个可以工作而另一个不能。

这是第二个(功能)模式的 HTML:

HTML(通过 jquery 函数调用)

$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");

我认为这两者可能互相干扰,但如果是这样的话,我不确定为什么第二个可以正常工作。

最佳答案

如上所述,ID为“part2”的DIV为display:none。模态框位于该 DIV 内。您需要使该 DIV 显示 block 才能使模式可见。

关于javascript - Twitter Bootstrap 3 模式对话框不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31434275/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com