CODEWITHSUNDEEP
javascriptjqueryangularjsbootstrap-modal
MMR
MMR

Reputation: 3019

How to unclose modal when click on outside from js

I am opening my modal from js and i want to unclose it when clicked on outside and I tried the following code but didnt worked.Can anyone please help me.Thanks.

  $('#login-register-model').modal({backdrop: 'static',keyboard: false}, 'show');

Upvotes: 2

Views: 645

Answers (4)

this.girish
this.girish

Reputation: 1306

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

will do a trick

Upvotes: 2

Nair Athul
Nair Athul

Reputation: 821

Need to restructure the call.

$('#login-register-model').modal({backdrop: 'static', keyboard: false});

http://jsfiddle.net/athulnair/8crjw2en/

Upvotes: 0

Sathish Kumar VG
Sathish Kumar VG

Reputation: 2172

Try with this

$('#login-register-model').modal({
    backdrop: 'static',
    keyboard: false
});

Upvotes: 0

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

I this example. It's working properly with backdrop: 'static' property.

Please compare your code with this example might you missed something.

$(document).ready(function(){
	$('.launch-modal').click(function(){
		$('#myModal').modal({
			backdrop: 'static'
		});
	}); 
});
.bs-example{
    margin: 20px;
 }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <input type="button" class="btn btn-lg btn-primary launch-modal" value="Launch Demo Modal">
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <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">Test</h4>
                </div>
                <div class="modal-body">
                    Lorem Ipsum
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions