How to disable clicking out of pop-up to exit?

Question

I created this pop-up box on my website:

enter image description here

with the following code:

<div class="modal custom fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
            <h4 class="modal-title" id="myModalLabel">Upload a Meme</h4>
        </div>
        <div class="modal-body">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Url: http://" id="urlInput">
                <input type="text" class="form-control" placeholder="Title" id="titleInput">
                <input id="saveComments" type="text" class="form-control" placeholder="Comments">
                <input type="text" class="form-control" placeholder="Tags" id="tagInput">
            </div>
            <br>
            <h4>&nbsp;Rate It:</h4>
            <div class="rating pull-left">
                <input type="radio" id="stars5" name="rating" value="5" /><label for="stars5" title="Rocks!">5 stars</label>
                <input type="radio" id="stars4" name="rating" value="4" /><label for="stars4" title="Pretty good">4 stars</label>
                <input type="radio" id="stars3" name="rating" value="3" /><label for="stars3" title="Meh">3 stars</label>
                <input type="radio" id="stars2" name="rating" value="2" /><label for="stars2" title="Kinda bad">2 stars</label>
                <input type="radio" id="stars1" name="rating" value="1" /><label for="stars1" title="Sucks big time">1 star</label>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default cancel" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-default submit" id="saveSubmit"><b>Submit</b></button>
        </div>
    </div>
</div>

I have a cancel button and a submit button. The cancel button exits the pop-up but a user can also click outside the Upload window to exit.

How can I prevent clicking outside the box to exit?

Thanks

You have to post your code for us to help mate. Without your code it would all be only guess work. — Harry, Jul 26 '14 at 03:08
Markup (HTML) alone won't suffice mate. You would need to show CSS & Javascript also. Are you using bootstrap or other libraries? I think it would be better if you can make a [fiddle](http://jsfiddle.net/) or a [bootply sample](http://www.bootply.com/) if you are using bootstrap. — Harry, Jul 26 '14 at 03:16
Looks like you are using bootstrap if so: [Disallow twitter bootstrap modal window from closing](http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing) — Patrick Evans, Jul 26 '14 at 03:17
Then follow the link provided it has several answers on preventing the close action when clicking outside the pop up — Patrick Evans, Jul 26 '14 at 03:23
@Patrick: apparent I was googling the wrong thing. If I did a little more searching...ugh!....thanks patrick! — user1631224, Jul 26 '14 at 03:29

score 4 · Accepted Answer · edited Apr 25 '19 at 23:02

4

Try adding these two strings to your HTML element: data-backdrop="static" and data-keyboard="false".

Setting data-backdrop to static and data-keyboard to false may solve your problem.

Please have a look here.It will give you solution

edited Apr 25 '19 at 23:02

vancy-pants

1,070
12
13

answered Jul 26 '14 at 03:26

Avinash Babu

6,171
3
21
26

How to disable clicking out of pop-up to exit?

1 Answers1