如何在不填写详细模态的情况下禁用用户不会关闭？

Question

I have a bootstrap modal where modal load when window is load. Now, I want that if user doesn't fill the details then modal doesn't close but If user fill detail and on click on submit button modal should be close. So, How can I do this? Please help me.

<script>
    $(document).ready(function(){
        $(window).on('load',function(){
                $('#myModal').modal('show');
        });
    });
</script>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 0px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Header</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                            <input type="text" name="names" id="names" class="form-control1"  placeholder="Name *" required>
                            <input type="text" name="emails" id="emails" class="form-control1" placeholder="Email *" required>
                            <input type="text" name="contacts" id="contacts" class="form-control1" placeholder="Contact *" required>
                            <textarea name="address" id="address" class="form-control1" placeholder="Address *" cols="10" rows="5" style="width:100%;margin-bottom: 1em;" required></textarea>
                            <input type="submit" name="insert" id="insert" value="Submit">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

$(document).ready(function(){
    $("#myModal").modal({
        backdrop: 'static',
        keyboard: false
    });
    $('#myModal').modal('show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 0px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Header</h3>
            </div>
            <div class="modal-body">
                <form method="POST" action="#">
                  <div class="row">
                      <div class="col-md-12">
                              <input type="text" name="names" id="names" class="form-control1"  placeholder="Name *" required>
                              <input type="email" name="emails" id="emails" class="form-control1" placeholder="Email *" required>
                              <input type="text" name="contacts" id="contacts" class="form-control1" placeholder="Contact *" required>
                              <textarea name="address" id="address" class="form-control1" placeholder="Address *" cols="10" rows="5" style="width:100%;margin-bottom: 1em;" required></textarea>
                              <input type="submit" name="insert" id="insert" value="Submit">
                      </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
</div>

Check the code I hope you want something like this.

</div>