Javascript 模型重叠

我有两个模型和两个按钮。每个按钮触发1个模型，按钮隐藏。我想使用

jQuery

触发函数，比如

$（“#appbutton”）。单击（）

触发
appmodel
时，也会触发
dbmodel
，并且它们彼此重叠

超大模态
可以使用以下代码切换其中一个的可见性：


const-appModel=document.getElementById（“appModel”）；
const dbModel=document.getElementById（“dbModel”）；
函数setAppModelVisible（）{
appModel.style.visibility=“可见”；
dbModel.style.visibility=“隐藏”；
}
函数setDbModelVisible（）{
dbModel.style.visibility=“可见”；
appModel.style.visibility=“隐藏”；
}
超大模态
特大型模态
应用程序显示
数据库显示
我从
html
中删除了隐藏和
数据目标
，因此按钮可以看到。我们可以尝试通过
javascript
在按钮上编写点击操作，以
显示模式

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>

这是它的测试

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

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

希望这能对您有所帮助，让我知道更多的澄清。
问题是什么？当我使用.modal（'show'）模型时，它无法正确加载，会闪烁一次并导致hidden@Vijay你能试试JSFIDLE并分享一下吗
Based on some operation trigger Below
$("appbutton").trigger("click")
$("dbbutton").trigger("click")