最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Can't disable the feature to click outside of modal and close - Stack Overflow

programmeradmin0浏览0评论

I have a bootstrap modal that I've set to open on page load, which works perfectly.

However, I'm trying to disable the feature where it closes if you click outside of the modal.

It contains a required form that must be filled and submitted in order for the modal to close, which is something I'm working on with the submit button, but I need to first make sure the user can't close this modal any other way without filling in the form and submitting.

Here's the current code:

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

});
</script>

So it opens on page load no problem, but if I hit the x, or click outside of it it closes and I wan't to totally disable that.

I have a bootstrap modal that I've set to open on page load, which works perfectly.

However, I'm trying to disable the feature where it closes if you click outside of the modal.

It contains a required form that must be filled and submitted in order for the modal to close, which is something I'm working on with the submit button, but I need to first make sure the user can't close this modal any other way without filling in the form and submitting.

Here's the current code:

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

});
</script>

So it opens on page load no problem, but if I hit the x, or click outside of it it closes and I wan't to totally disable that.

Share Improve this question asked Jul 30, 2018 at 13:11 Geoff_SGeoff_S 5,1057 gold badges56 silver badges168 bronze badges 6
  • 2 Possible duplicate of Disable click outside of bootstrap modal area to close modal – Lelio Faieta Commented Jul 30, 2018 at 13:13
  • with just a quick google search you'd have found your solution on this site: here – Lelio Faieta Commented Jul 30, 2018 at 13:13
  • I did find that, and as you can see I implemented that, but it's not working in my code. I need to keep the same functionality of showing on page load but still disable this function, which isn't working even though I've used that code – Geoff_S Commented Jul 30, 2018 at 13:15
  • On a separate note, use $(function(){ instead of $(window).on('load', function({. It looks cleaner. – Damodar Dahal Commented Jul 30, 2018 at 13:20
  • @DamodarDahal I'm using it that way so that the page load is the first thing to trigger the modal loading, and then calling the functions – Geoff_S Commented Jul 30, 2018 at 13:21
 |  Show 1 more ment

2 Answers 2

Reset to default 6

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>

I just used .add instead of .toggle inside window event which fixed the issue.

function windowOnClick(event) {
  console.log(event.target)
    if (event.target == modal) {
         modal.classList.add("modal-show");
    }
}
发布评论

评论列表(0)

  1. 暂无评论