Reputation: 170

Displaying a bootstrap modal on page load

I have a modal that i need to popup when the page loads. However existing code i have doesn't display it(nothing appears to happen). The existing code was used to display it from a table row click. (this worked perfectly.)

I have then experimented with this new code snippet which displays the modal on page load though it displays it incorrectly.

I have 3 questions. (If they need to be put into different posts please let me know)

whats the difference between my table row click code and the new snippet I'm trying (NOT the event part but the actual displaying of the modal part).
Why is the new snippet not displaying correctly.
best way to get my desired result. (Display the modal correctly on page load)

on table row click (this code worked correctly):

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

new snippet i was trying:

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>

incorrect displaying with new on page load snippet:

Its position is not correct, the background does not fade, and when i click on it it disappears. (The on table row click method does not have these issues associated with the modal)

correct displaying with table row click snippet:

Upvotes: 1

Answers (1)

Greedo

Reputation: 3559

1) The scripts does not produce the same results because they are not equivalent: they target different events (ready in the jquery script, and load in the js script).

The "correct" (but not advisable) equivalent script would be to add this to your body:

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

2) The second script does not produce the desired results because on windows load the modal is yet not existing, hence it cannot open.

3) The "best" way, intended as cleaner and coherent (pure JQuery) solution is:

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

/------------------------ EDIT ------------------------------------/

Tried the solution in "stand-alone" and it works, maybe the issue comes from the integration in your code

$(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>

Upvotes: 1

Displaying a bootstrap modal on page load

Answers (1)

Related Questions