Disable Click Outside of Bootstrap Modal Area to Close Modal

Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

If using JavaScript then:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

or in HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

Disable click event outside of bootstrap modal area to close modal in angular 4

please add this config's in html. Hope it will help your problem.

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    [config]="{backdrop: 'static',  keyboard: false}" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

Can't disable the feature to click outside of modal and close

Add the show property to the modal and only call once

<script type="text/javascript"> 
$(window).on('load',function(){
    $("#my_modal").modal({
        backdrop: 'static',
        keyboard: false,
        show: true // added property here
    });
});
</script>

Disable Close Modal on Outside Click

// for disable modal when click outside

$('#modalid').openModal({dismissible:false});

// remove modal-action modal-close in ok button

<a href="#" onClick="check_ganpass()" id="btn_ok" class="waves-effect waves-green btn-flat ">Edit</a>

// insert bellow "Materialize.toast('Data Telah Berubah',4000);"

$('modalid').closeModal();

hope that answer your question. :)

Allow closing a modal when clicking outside

I added this code, and now it's working:

$("#myModal").click(function(ev){
    if(ev.target != this) return;
    $('#myModal').modal('hide');
  });

prevent bootstrap modal close on click outside

Use modal js property keyboard true or false. In your code there is no class .modal-content .modal-body.

$(function() {  $('#uploadedImagePopup').modal({    show: true,    keyboard: false,    backdrop: 'static'  });});

<!DOCTYPE html><html lang="en">
<head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
<body>
  <div class="container">
    <div class="modal fade modal-popup confirm-uploaded-image-popup" id="uploadedImagePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">      <div class="modal-content modal-dialog modal-popup-content" role="document">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal">×</button>          <h4 class="modal-title">Modal Header</h4>        </div>        <div class="modal-body">          <div class="confirm-uploaded-image-popup-img"></div>          <div class="modal-popup-desc">You have uploaded a picture. Are you sure you want to add it to your gallery?</div>        </div>        <div class="modal-footer">          <button data-dismiss="modal" class="btn btn-very-light-gray confirm-uploaded-image-popup-cancel">Cancel</button>          <button class="btn btn-green confirm-uploaded-image-popup-ok">OK</button>        </div>        <div>        </div>      </div>    </div>  </div>
</body>
</html>

Stop modal from closing on outside click

Set the modal's backdrop to static. The modal component has a prop of backdrop, set that to backdrop="static"

<div>
    <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">
        <Modal.Header>
            <Modal.Title>Change Password</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <form className="form-horizontal" style={{margin:0}}>
                <div className='password-heading'>This is the first time you have logged in.</div>
                <div className='password-heading'>Please set a new password for your account.</div>
                <br/>

                <label className="password">Password
                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>
                    <span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>
                    <span className="password__strength" data-score={this.state.score}>
                        <div className="strength_string">{this.state.strength}</div>
                    </span>
                </label>
                <br/>
                <label className="password">Confirm Password
                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>
                </label>

            </form>
            <br/>
        </Modal.Body>
        <Modal.Footer>
            <Button onClick={this.submitPassword} disabled={this.state.isDisabled}>Submit</Button>
        </Modal.Footer>
    </Modal>
</div>

From the documentation:

Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
react-bootstrap

Disallow Twitter Bootstrap modal window from closing

I believe you want to set the backdrop value to static. If you want to avoid the window to close when using the Esc key, you have to set another value.

Example:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

OR if you are using JavaScript:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});