显示模态的引导按钮必须多次单击才能打开模态答案

【问题标题】：Bootstrap button to show modal has to be clicked many times to open the modal显示模态的引导按钮必须多次单击才能打开模态
【发布时间】：2020-06-04 17:32:05
【问题描述】：

我正在使用 Bootstrap4，在我的导航栏中我有一个按钮来打开一个模式。我已经按照引导网站中提到的正确顺序添加了 jquery、popper 和 bootstrap js。我必须连续单击此按钮 5-6 次才能打开模态

<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails" />

我的模态是

<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <asp:Label ID="lblLoginID" runat="server"></asp:Label><br />
        <asp:Label ID="lblIPAddress" runat="server" ></asp:Label><br />
        <asp:Label ID="lblSystemName" runat="server" ></asp:Label><br />
        <asp:Label ID="lblVersionInfo" runat="server" ></asp:Label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我尝试使用 javascript 通过这段代码打开模式

<asp:Button ID="btnUserDetails" runat="server" Text="USER DETAILS" data-toggle="modal" data-target="#userDetails"  OnClientClick="return openmodal();return false;" />


<script type="text/javascript">
 function openmodal() {
 $('#userDetails').modal('show');
}
 </script>

但是这不起作用。我的 javascript 函数正在被调用，因为我发出了一条警报消息并进行了测试。垂直滚动条发生了一些奇怪的事情，尽管在单击按钮时，它会在单击按钮时显示一段时间，然后我认为一旦按钮单击事件结束就会消失。

【问题讨论】：

标签： bootstrap-modal

【解决方案1】：

问题在于模态中的“淡入淡出”

<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" >

我删除了淡入淡出并使用了“显示”并且模态正在工作

<div class="modal show" id="userDetails" tabindex="-1" role="dialog" >

我还为触发模型的按钮添加了一个 javascript 函数

<script>
   $( '#btnUserDetails').click( function(){
    $( '#userDetails').modal('show');
        });
</script>

【讨论】：