Question

我有一个引导模态，当加载窗口时模态加载。现在，我希望如果用户不填写详细信息，那么模态不会关闭，但是如果用户填写详细信息并单击“提交”按钮，则模态应该关闭。那么，我该怎么做？请帮助我。

<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>

检查代码，我希望您想要类似的东西。

Answer 2

在您的data-backdrop="static" data-keyboard="false"元素中添加<div id="myModal" class="modal fade" role="dialog">，以防止在点击之外关闭模式。

所以元素看起来像 <div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog">

如何禁用用户而不填写详细信息模态不会关闭？

2 个答案: