隐藏的引导模式有多清晰

Posted 2023-05-08

【中文标题】隐藏的引导模式有多清晰

【英文标题】：How clear bootstrap modal on hide

【发布时间】：2015-09-10 10:37:33

【问题描述】：

如何在关闭/隐藏/关闭时清除引导模式？

我有以下模态定义：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   Add New Comment
</button>

包含 Modal 的局部视图

@html.Partial("_CreateComment", Model)


 // Partial view which contains modal

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      @using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
            
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "comments",
                OnSuccess = "$('#myModal').modal('hide');"

            ))
      
        <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="myModalLabel">Add Comment</h4>
        </div>
        <div class="modal-body">
                @Html.ValidationSummary(true)
                @Html.HiddenFor(model => model.Blog.BlogID)

                <div class="form-group">
                    @Html.LabelFor(model => model.BlogComment.Comment)
                    @Html.TextAreaFor(model => model.BlogComment.Comment, 4, 104, new  @class = "form-control" )
                    @Html.ValidationMessageFor(model => model.BlogComment.Comment)
                </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      
  </div>
   </div>
</div>

这是我用来清除内容的 javascript：

$(function () 
    //clear modal cache, so that new content can be loaded
    $('body').on('hidden.bs.modal', '.modal', function () 
        $(this).removeData('bs.modal');

    );
);

如果我在输入一些内容后关闭模式，或者在提交时表单中的内容不清晰？

【参考方案1】：

这是最简单的解决方法：

$('#myModal').on('hidden.bs.modal', function () 
    $(this).find("input,textarea,select").val('').end();

);

【讨论】：

为我解决了。谢谢

如果您还想清除select，我建议您使用.val([])。此外，在这种情况下不需要.end()，在链接时重置状态特别有用。

如何清除输入类型="checkbox"？我试过把 input type="checkbox" 和 input#id 放在上面，但这不起作用。

此解决方案正在删除我的模态上的提交按钮的值。我使用了@GuruprasadRao 的解决方案。

@RaphaelMonteiro 你可以过滤... $(this).find('input:not([type=submit]), textarea, select').val([]);

【参考方案2】：

根据存在的输入类型使用val('')，并使用#myModal而不是body

$('#myModal').on('hidden.bs.modal', function () 
        $('.modal-body').find('textarea,input').val('');
);

DEMO

【讨论】：

它不起作用？我将内容添加到文本字段并单击关闭然后重新打开模式并且文本字段中的内容仍然存在？

删除整个正文，包括输入字段？我需要输入字段仍然存在，只需清除输入字段中的内容。

@ozzii- 我问了同样的问题link。但我从来没有得到答案，所以我每次都使用 location.reload 来清除我的模式。

最简单的方法是 `$(this).find("input,textarea,select").val('').end();` 修复它。

【参考方案3】：

这对我有用

$('body').on('hidden.bs.modal', '.modal', function () 
        $(".modal-content").empty();
      );