Why doesn't Bootstrap modal show without invoking javascript code

Question

I created an html page with bootstrap's modal code (copied from Bootstrap's website. I notice that the modal doesn't show unless I call modal('show'). Why? Shouldn't the browser interpret the html and display the modal box? The following code doesn't show the modal but if you comment the script at the end, it will show the modal

<!DOCTYPE html>
<html lang="en">
<head>
  <base href=""> 
  <title>Example</title>
  <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
  <link rel="stylesheet" media="screen" href="fiddle.css">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
  </head>
<body>  
  Did you see the dialog box?
  <div class="modal" tabindex="-1" role="dialog" id="mydialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<¬- UNCOMMENT THIS AND THE MODAL WILL SHOW-->
<!--script>
$('#mydialog').modal('show');    
  </script-->

</body>

Nidhi · Accepted Answer · 2018-09-08 07:35:51Z

1

Bootstrap modal is designed for trigger the modal window when you click on the element(i.e. a button or a link) with following attributes:
data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal

In your code, no click event occurs and thus modal was not open bydefault

It looks like you want to open modal when page load as the modal is not designed to open on page load you have to manually trigger modal's show Method

answered Sep 8, 2018 at 7:35

Nidhi

1,4532 gold badges13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manu Chadha Over a year ago

Well explained. Thanks

Mounir Tanbouzeh El Husseini · Accepted Answer · 2018-09-08 07:16:07Z

0

since modal works if you clicked on a button to toggle display this example works fine see this link https://getbootstrap.com/docs/4.0/components/modal/#live-demo

answered Sep 8, 2018 at 7:16

Mounir Tanbouzeh El Husseini

3591 gold badge4 silver badges17 bronze badges

Comments

Hariom Singh · Accepted Answer · 2018-09-08 07:19:31Z

You can Use this bootstrap modal code this is working fine.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>

DragonBorn · Accepted Answer · 2018-09-08 07:29:33Z

That is because modaldiv with the class of modal has a display property set to none by default.

Comment the script and inspect the modal in your browser you will notice that it has a display of none.

When you call .modal() and pass in the parameter show on your modal id, then it's display property gets set to block, which is when you are able to see it.

This is because modals are not supposed to be shown by default but instead on a user event so you can call .modal('show)` on the event.

$('#mydialog').modal('show');

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<body>  
  Did you see the dialog box?
  <div class="modal" tabindex="-1" role="dialog" id="mydialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">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">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

Ng Atom · Accepted Answer · 2018-10-11 07:01:53Z

0

i think it was happen because in head tag you join jquery and bootstrap librrary so your don’t need you code anymore because bootstrap do this for you..

edited Oct 11, 2018 at 7:01

answered Sep 8, 2018 at 7:15

Ng Atom

957 bronze badges

Collectives™ on Stack Overflow

Why doesn't Bootstrap modal show without invoking javascript code

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related