Question

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

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

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

我的table行点击代码和我正在尝试的新代码段之间有什么区别（不是事件部分，而是模态部分的实际显示）。
为什么新代码片段无法正确显示。
获得我想要的结果的最佳方法。（在页面加载时正确显示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>

显示不正确并带有新的页面加载代码段：

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

正确显示表格行单击代码段：

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>

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

1 个答案: