Bootstrap 引导模式在关闭后进入初始UI状态

lvjbypge  于 2023-06-20  发布在  Bootstrap
关注(0)|答案(3)|浏览(148)

我使用Bootstrap 3模式。我有一个文本输入内的模态和一个链接时,点击将创建新的文本输入字段低于第一个最多4个领域。我的代码工作正常,它创建了更多的输入字段。
但是,当我关闭模式并再次打开它时,会有多个输入文本字段,这取决于我之前单击链接的次数。我不希望发生这种情况-当我关闭模态并再次打开它时,我希望只看到一个输入文本字段(初始状态),而不是看到模态中DOM的更改。这可能吗?
Link to my code

a1o7rhls

a1o7rhls1#

您希望使用基于这里的引导JavaScript文档的hide.bs.modal事件
首先,我将为所有输入元素和新呈现的div元素添加一个类,clearAfterClose用于输入,hideAfterClose用于divelements。然后我将创建我的Jquery函数为:

$('#myModal').on('hide.bs.modal', function(e) {
  $('.clearAfterClose').val('');
  $('.hideAfterClose').hide();
})

这将在模态隐藏时触发,并使用类clearAfterClose清除所有输入元素,并使用类hideAfterClose隐藏所有div。我为演示here创建了一个codepen

wlp8pajw

wlp8pajw2#

它将一直在那里,因为你正在编辑HTML。在您刷新页面或自行设置之前,模态不会返回到其原始状态。只需清空容器,并在关闭模态时再次添加第一个输入。注意“$('div #myModal').on('hidden.bs. modal'”事件块上发生的事情。
你的JS(我对你的原始代码进行了一点重构)

$('#additional-fields').on('click', function () {

  var emailInputList = $('div.email-input-list'),
    itemCount = emailInputList.children().length,
    newItem = $('<div class="form-group"><label for="txtFriendEmail' + itemCount + '" class="sr-only">Email</label><input type="text" class="form-control" placeholder="Email" id="txtFriendEmail' + itemCount + '"></div>');

  if (itemCount < 4) {
    emailInputList.append(newItem);
  }

});

$('div#myModal').on('hidden.bs.modal', function () {  
  $('div.email-input-list').empty().append($('<div class="form-group"><label for="txtFriendEmail0">Email</label><input type="text" class="form-control" placeholder="Email" id="txtFriendEmail0"></div>'));      
});

您的HTML

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <div class="form-group clearfix" id="input-array">
                <div class="row">
                  <div class="col-sm-6 email-input-list">
                    <div class="form-group">
                        <label for="txtFriendEmail0">Email</label>
                        <input type="text" class="form-control" placeholder="Email" id="txtFriendEmail0">
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <p class="form-group-input-helper"><a href="javascript:void(0);" id="additional-fields">Add another friend's email</a></p>
                  </div>
                </div>
              </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>
5gfr0r5j

5gfr0r5j3#

('#name of input field ').瓦尔('');

相关问题