Bootstrap modal doesn't close when applying display:block class directly

Question

I'm trying to launch a Bootstrap modal without using any buttons or jquery. I would just like show a bootstrap modal when page loads as a information and user should be able to close it using close button or it should close when clicked anywhere on the page. I have tried to use the solution from this SO question load-without-firing-button-or-using-jquery

However, using the suggested solution prevents the modal from being closed using data-dismiss.

.modal {
  display:block;
}

Is there a reason why modal doesn't close in this case ? I have tried applying seperate CSS class but it doesn't make a difference.

.mymodal {
      display:block;
    }

HTML

 <div id="registrationModal" class="modal fade in mymodal">
   <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h4 class="modal-title">Title</h4>
           </div>
          <div class="modal-body">
                Text
          </div>
    </div>
  </div>

Is it possible to achieve this without using jquery? or valid explanation why such thing is not possible?

Yes. I have added the html. Please let me know if something is missing — jas, Jan 16 '17 at 20:33
You don't want jQuery at all to close it or just a preference? — Syden, Jan 16 '17 at 20:45
I'm using jquery in my website. I have other modal that I trigger using buttons and close work fine on them, but this specific one I just launch it directly using css. And, in that scenario close doesn't work. — jas, Jan 16 '17 at 20:50

score 0 · Answer 1 · answered Jan 16 '17 at 20:53

The modal doesn't close because there are multiple functions that do different things when you open and close the modal. So when you open the modal the class .in, display block are added and area-hidden="true" is removed from that element. So when you click close there is reverse function. In your case just adding the display block will not work because you need to remove the class .in and remove the whole area-hidden="true" attribute.

Here is the working code:

<style>
.modal{display:block;}
</style>

<script>
$(function() {
    $(".modal").addClass("in");
    $(".close").click(function(){
        $(".modal").removeClass("in").css("display","none").attr("aria-hidden","true"); 
    });
});
</script> 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal">
  Launch demo modal
</button>

<div id="my-modal" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                Hello World!
            </div>
        </div>
    </div> 
</div>

<div class="modal-backdrop fade"></div>

score 0 · Answer 2 · answered Jan 16 '17 at 20:54

Sorry I know you mentioned no jQuery, but there is no CSS fix that I'm aware of, and the jQuery required for this is minimal.

I'd suggest displaying it like this, maybe If no better answer comes up you may consider it:

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="registrationModal" class="modal fade in mymodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        Text
      </div>
    </div>
  </div>

Bootstrap modal doesn't close when applying display:block class directly

2 Answers2