CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Sam
Sam

Reputation: 4484

Disallow bootstrap modal to close on clicking anywhere on screen

I have a text which when clicked should display a modal window - 

<div data-toggle="modal" data-target="#modalid">Open</div>

<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body" style="background-color: #F0F0F0">
        Content
        </div>
   </div>
</div>
</div>

I have used data-backdrop="static" for preventing the window to close by clicking anywhere on the screen, but it is not working. Window is still getting closed. (Note: another attribute data-keyboard="false" is working fine)

One more thing, I saw that this class is always getting attached to the html, just above div class="modal-dialog" line- 

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

Is this causing the issue? How to fix it?

Thanks in Advance.

Upvotes: 0

Views: 3955

Answers (1)

DavidG
DavidG

Reputation: 118937

Just to prove your code is already working as required, here it is in a runnable snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div data-toggle="modal" data-target="#modalid">Open</div>

  
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body" style="background-color: #F0F0F0">
        Content
        </div>
    </div>
</div>

Upvotes: 2

Related Questions