Question

我有这种模式：

<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="">ADD New User</h4>
            </div>
            <div class="modal-body">
              <div class="addMsg"></div>
              <form method="POST">
                <div class="form-group">
                  <label for="name" class="control-label">Name:</label>
                  <input type="text" class="form-control" id="name">
                </div>
                <div class="form-group">
                  <label for="location" class="control-label">Location:</label>
                  <input type="text" class="form-control" id="disLocation">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="add" >ADD</button>
            </div>
          </div>
        </div>
 </div>

按钮打开模态：

<button class="addNew btn btn-primary" data-toggle="modal" data-target="#addData">ADD New</button>

效果很好，单击“添加新按钮”会显示，在单击“关闭”按钮时消失，此时我在模态外或在模态外部。

我正在使用它将数据插入数据库，我希望在单击模态正文中class="add"的按钮时隐藏它，然后如果我再次点击添加新按钮，它就会显示出来。

我试过了：

 //On Clicking The Button Within Modal Body To Insert Data To Database.
    $( "#add" ).on('click', function(){
        $('#addData').removeClass('fade in');
        $('#addData').addClass('fade');
        $('#addData').hide();
        $('.modal-backdrop').removeClass('fade in');
        $('.modal-backdrop').addClass('fade');
        $('.modal-backdrop').hide();
        $('body').removeClass('modal-open');
    });


//On Clicking The ADD New Button To Show The Modal Again To Insert Another User.
$( ".addNew" ).on('click', function(){
    $('#addData').removeClass('fade');
    $('#addData').addClass('fade in');
    $('#addData').show();
    $('.modal-backdrop').removeClass('fade');
    $('.modal-backdrop').addClass('fade in');
    $('.modal-backdrop').show();
    $('body').addClass('modal-open');
});

但它无法正常工作，因为我必须在模态被隐藏后点击两次添加新按钮，我认为这是因为它与Bootstrap功能相冲突。

Answer 1

$(".add").click(function(){
    $("#add").click();
});

如何在单击按钮内隐藏Bootstrap 3 Modal并单击页面上的按钮重新打开它？

1 个答案: