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

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">×</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?

Answer 1

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">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade"></div>

Answer 2

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">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>