模型重叠

Question

我有两个模型和两个按钮。 每个按钮触发 1 个模型，按钮隐藏。 我想使用jQuery触发函数，比如$('#appbutton').click() 。

触发appmodel ， dbmodel触发appmodel并且它们彼此重叠。

<button type="button" data-toggle="modal" data-target="#appmodel" hidden="hidden" id="appbutton">Extra large modal</button>
<button type="button" data-toggle="modal" data-target="#dbmodel" hidden="hidden" dbbutton">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <h4 class="display-4">APP Display</h4>
    </div>
  </div>
</div>

<div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <h4 class="display-4">DB Display</h4>
    </div>
  </div>
</div>

Answer 1

我从html删除了 hidden 和data-target以便可以看到按钮。 我们可以尝试在 Button 上编写单击操作以通过javascript show modal 。

HTML

<button type="button" data-toggle="modal"   id="appbutton">Extra large modal</button>
<button type="button" data-toggle="modal"  id="dbbutton">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <h4 class="display-4">APP Display</h4>
    </div>
  </div>
</div>

<div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <h4 class="display-4">DB Display</h4>
    </div>
  </div>
</div>

JS

$("#appbutton").click(function(){
    $("#appmodel").modal('show')
})
$("#dbbutton").click(function(){
    $("#dbmodel").modal('show')
})

这是它的测试https://jsfiddle.net/cb1asyne/

现在您可以隐藏按钮并在按钮上应用点击触发器，例如

Based on some operation trigger Below
$("appbutton").trigger("click")
$("dbbutton").trigger("click")

希望这会帮助你，让我知道更多的澄清。

Answer 2

您可以使用以下代码切换任一可见性：

 const appModel = document.getElementById("appmodel"); const dbModel = document.getElementById("dbmodel"); function setAppModelVisible() { appModel.style.visibility = "visible"; dbModel.style.visibility = "hidden"; } function setDbModelVisible() { dbModel.style.visibility = "visible"; appModel.style.visibility = "hidden"; }

 <button type="button" data-toggle="modal" data-target="#appmodel" id="appbutton" onclick="setAppModelVisible()">Extra large modal</button> <button type="button" data-toggle="modal" data-target="#dbmodel" id="dbbutton" onclick="setDbModelVisible()">Extra large modal</button> <div class="modal fade bd-example-modal-xl" role="dialog" id="appmodel"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <h4 class="display-4">APP Display</h4> </div> </div> </div> <div class="modal fade bd-example-modal-lg" role="dialog" id="dbmodel"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <h4 class="display-4">DB Display</h4> </div> </div> </div>