关闭后引导模式进入初始 UI 状态答案

【问题标题】：bootstrap modal get to initial UI state after close关闭后引导模式进入初始 UI 状态
【发布时间】：2015-07-24 17:33:07
【问题描述】：

我正在使用 Bootstrap 3 模式。我在模式中有一个文本输入，单击一个链接将在第一个文本输入字段下方创建新的文本输入字段，最多 4 个字段。我的代码工作正常，它创建了更多的输入字段。

但是，当我关闭模式并再次打开它时，会出现多个输入文本字段，具体取决于我之前单击链接的次数。我不希望这种情况发生 - 当我关闭模式并再次打开它时，我希望只看到一个输入文本字段（初始状态）并且看不到模式中 DOM 的更改。这可能吗？

Link to my code

【问题讨论】：

标签： twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

您想使用基于 BOotstrap Javascript 文档here的 hide.bs.modal 事件@

首先，我将向所有输入元素和新渲染的 div 元素添加一个类 clearAfterClose 用于输入， hideAfterClose 用于潜水元素。然后我会创建我的 Jquery 函数：

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

当模态框被隐藏并使用类 clearAfterClose 清除所有输入元素并使用类 hideAfterClose 隐藏所有 div 时，这将触发。我创建了一个代码笔用于演示here

【讨论】：

这不是比批准的答案容易吗？

【解决方案2】：

它会一直存在，因为您正在编辑 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>

【讨论】：