在页面加载时显示引导模式

Question

我有一个在页面加载时需要弹出的modal 。 但是，我拥有的现有代码没有显示它（似乎什么也没发生）。 现有代码用于通过单击table行来显示它。 （这工作得很好。）

然后我尝试了这个新的代码片段，它在页面加载时显示modal ，尽管它显示不正确。

我有3个问题。 （如果需要将它们放在不同的帖子中，请告诉我）

1. 我的table行点击代码和我正在尝试的新代码段之间有什么区别（不是事件部分，而是模式部分的实际显示）。
2. 为什么新代码段显示不正确。
3. 获得我想要的结果的最佳方式。 （在页面加载时正确显示modal ）

---

在表格行上单击（此代码正常工作）：

 $(document).ready(function ($) {
     $(".table_row_click1").click(function (e) {
         $(this).attr('data-target', "#myModal");
         $(this).attr('data-toggle', 'modal');
     });
 });

我正在尝试的新片段：

window.addEventListener('load', () => {
    $('#myModal').modal('toggle');
});

modal ：

<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel'
  aria-hidden='true'>
  <div class='modal-dialog modal-dialog-scrollable' role='document'>
     <div class='modal-content'>
        <div class='modal-header'>
           <h3 class='modal-title' id='exampleModalLabel'>Supplier information</h3>
           <button class='close' type='button' data-dismiss='modal' aria-label='Close'>
           <span aria-hidden='true'>×</span></button>
        </div>
        <div class='modal-body'>
           <div class='form-group'><label for='ids'>ID:</label><input runat="server" id="modal_id" class="form-control" required='required'  type="text" placeholder="" readonly></div>
           <div class='form-group'><label for='name'>Name:<span style="color:red">*</span></label><input runat="server" id="modal_name"  class='form-control firstname' required='required' type='text' name='name'
              placeholder='Enter first name' /></div>
           <div class='form-group'><label for='country'>Country:</label><input runat="server" id="modal_country"  class='form-control lastname'  type='text' name='country' placeholder='Enter Country' 
              /></div>
           <div class='form-group'><label for='state'>State:</label><input runat="server" id="modal_state"  class='form-control phone'  type='text' name='state' placeholder='Enter State'
              /></div>
           <div class='form-group'><label for='street_name'>Street Name:</label><input runat="server" id="modal_street_name"  class='form-control email'  type='text' name='street_name' placeholder='Enter Street Name'
              /></div>
           <div class='form-group'><label for='street_number'>Street #:</label><input runat="server" id="modal_street_number"  class='form-control address' type='text' name='street_number' placeholder='Enter Street #'
              /></div>
           <div class='form-group'><label for='phone1'>Phone # 1:</label><input runat="server" id="modal_phone_number_1"  class='form-control birthday'  type='text' name='phone1'  placeholder='Enter Phone # 1'
              /></div>
           <div class='form-group'><label for='phone2'>Phone # 2:</label><input runat="server" id="modal_phone_number_2"  class='form-control birthday'  type='text' name='phone2'  placeholder='Enter Phone # 2'
              /></div>
           <div class='form-group'><label for='email1'>Email 1:</label><input runat="server" id="modal_email_1"  class='form-control birthday'  type='text' name='email1'  placeholder='Enter Email 1'
              /></div>
           <div class='form-group'><label for='email2'>Email 2:</label><input runat="server" id="modal_email_2"  class='form-control birthday'  type='text' name='email2'  placeholder='Enter Email 2'
              /></div>
           <div class='form-group'><label for='rep_first_name'>Rep First Name:</label><input runat="server" id="modal_rep_first_name"  class='form-control birthday' type='text' name='rep_first_name'   placeholder='Enter Rep First Name'
              /></div>
           <div class='form-group'><label for='rep_last_name'>Rep Last Name:</label><input runat="server" id="modal_rep_last_name"  class='form-control birthday' type='text' name='rep_last_name'  placeholder='Enter Rep Last Name'
              /></div>
           <div class='form-group'><label for='rep_phone'>Rep Phone #:</label><input runat="server" id="modal_rep_phone_number"  class='form-control birthday'  type='text' name='rep_phone'  placeholder='Enter Rep Phone #'
              /></div>
           <div class='form-group'><label for='rep_email'>Rep Email:</label><input runat="server" id="modal_rep_email"  class='form-control birthday'  type='text' name='rep_email'  placeholder='Enter Rep Email'
              /></div>
           <div class='form-group'><label for='website'>Website:</label><input runat="server" id="modal_website"  class='form-control birthday' type='text' name='website'  placeholder='Enter Website'
              /></div>
           <div class='form-group'><label for='gender' >Active:<span style="color:red">*</span></label>
              <span  style="color:green"><input runat="server" id="modal_active_true"    required='required'  type='radio' name='Active' value='True' />True</span>
              <span  style="color:red"><input runat="server" id="modal_active_false"   required='required' type='radio' name='Active' value='False' />False</span>
           </div>
           <button class='btn btn-primary btn-save-change'
              type='submit'>Save changes</button>
        </div>

     </div>
  </div>

新的页面加载片段显示不正确：

它的位置不正确，背景不褪色，当我点击它时它消失了。 （表上行点击方法没有这些与模态相关的问题）

使用表格行点击片段正确显示：

Answer 1

1) 脚本不会产生相同的结果，因为它们不等价：它们针对不同的事件（在 jquery 脚本中ready ，在 js 脚本中load ）。

“正确”（但不可取）的等效脚本是将其添加到您的正文中：

<script>
   $('#myModal').modal('toggle');
</script>

2) 第二个脚本没有产生预期的结果，因为在 Windows 加载时模态还不存在，因此它无法打开。

3）旨在作为更清晰和连贯（纯JQuery）解决方案的“最佳”方式是：

$(document).ready(function(){
   $('#myModal').modal('toggle');
});

/ - - - - - - - - - - - - 编辑 - - - - - - - - - - - - -------------/

在“独立”中尝试了解决方案并且它有效，也许问题来自您的代码中的集成

 $(document).ready(function(){ $('#myModal').modal('toggle'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='exampleModalLabel' aria-hidden='true'> <div class='modal-dialog modal-dialog-scrollable' role='document'> <div class='modal-content'> <div class='modal-header'> <h3 class='modal-title' id='exampleModalLabel'>Supplier information</h3> <button class='close' type='button' data-dismiss='modal' aria-label='Close'> <span aria-hidden='true'>×</span></button> </div> <div class='modal-body'> <div class='form-group'><label for='ids'>ID:</label><input runat="server" id="modal_id" class="form-control" required='required' type="text" placeholder="" readonly></div> <div class='form-group'><label for='name'>Name:<span style="color:red">*</span></label><input runat="server" id="modal_name" class='form-control firstname' required='required' type='text' name='name' placeholder='Enter first name' /></div> <div class='form-group'><label for='country'>Country:</label><input runat="server" id="modal_country" class='form-control lastname' type='text' name='country' placeholder='Enter Country' /></div> <div class='form-group'><label for='state'>State:</label><input runat="server" id="modal_state" class='form-control phone' type='text' name='state' placeholder='Enter State' /></div> <div class='form-group'><label for='street_name'>Street Name:</label><input runat="server" id="modal_street_name" class='form-control email' type='text' name='street_name' placeholder='Enter Street Name' /></div> <div class='form-group'><label for='street_number'>Street #:</label><input runat="server" id="modal_street_number" class='form-control address' type='text' name='street_number' placeholder='Enter Street #' /></div> <div class='form-group'><label for='phone1'>Phone # 1:</label><input runat="server" id="modal_phone_number_1" class='form-control birthday' type='text' name='phone1' placeholder='Enter Phone # 1' /></div> <div class='form-group'><label for='phone2'>Phone # 2:</label><input runat="server" id="modal_phone_number_2" class='form-control birthday' type='text' name='phone2' placeholder='Enter Phone # 2' /></div> <div class='form-group'><label for='email1'>Email 1:</label><input runat="server" id="modal_email_1" class='form-control birthday' type='text' name='email1' placeholder='Enter Email 1' /></div> <div class='form-group'><label for='email2'>Email 2:</label><input runat="server" id="modal_email_2" class='form-control birthday' type='text' name='email2' placeholder='Enter Email 2' /></div> <div class='form-group'><label for='rep_first_name'>Rep First Name:</label><input runat="server" id="modal_rep_first_name" class='form-control birthday' type='text' name='rep_first_name' placeholder='Enter Rep First Name' /></div> <div class='form-group'><label for='rep_last_name'>Rep Last Name:</label><input runat="server" id="modal_rep_last_name" class='form-control birthday' type='text' name='rep_last_name' placeholder='Enter Rep Last Name' /></div> <div class='form-group'><label for='rep_phone'>Rep Phone #:</label><input runat="server" id="modal_rep_phone_number" class='form-control birthday' type='text' name='rep_phone' placeholder='Enter Rep Phone #' /></div> <div class='form-group'><label for='rep_email'>Rep Email:</label><input runat="server" id="modal_rep_email" class='form-control birthday' type='text' name='rep_email' placeholder='Enter Rep Email' /></div> <div class='form-group'><label for='website'>Website:</label><input runat="server" id="modal_website" class='form-control birthday' type='text' name='website' placeholder='Enter Website' /></div> <div class='form-group'><label for='gender' >Active:<span style="color:red">*</span></label> <span style="color:green"><input runat="server" id="modal_active_true" required='required' type='radio' name='Active' value='True' />True</span> <span style="color:red"><input runat="server" id="modal_active_false" required='required' type='radio' name='Active' value='False' />False</span> </div> <button class='btn btn-primary btn-save-change' type='submit'>Save changes</button> </div> </div> </div>