正文 

当前位置： 首页 > 问答 >

隐藏的引导模式有多清晰

     2023-05-08     212

关键词：

【中文标题】隐藏的引导模式有多清晰【英文标题】：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();
      );

【讨论】：

不要执行我的脚本，在刀片中隐藏引导模式

】不要执行我的脚本，在刀片中隐藏引导模式【英文标题】：Don´texecutemyscript,hideboostrapmodalinblade【发布时间】：2015-06-3018:38:17【问题描述】：我在想要显示的视图中有以下代码，但不显示脚本，并且不起作用当我加载视图时，... 查看详情

iOS 12中的引导模式Iframe隐藏在内容后面

】iOS12中的引导模式Iframe隐藏在内容后面【英文标题】：BootstrapmodalIframeiniOS12hiddenbehindcontent【发布时间】：2019-12-2202:37:59【问题描述】：我在iOS12上的Safari的iframe中显示的Bootstrap4.1模式存在问题。测试的所有其他浏览器都按预期... 查看详情

我可以检查引导模式是不是显示/隐藏？

】我可以检查引导模式是不是显示/隐藏？【英文标题】：CanIcheckifBootstrapModalShown/Hidden?我可以检查引导模式是否显示/隐藏？【发布时间】：2013-11-0913:56:23【问题描述】：我可以检查引导模式当前是否以编程方式显示/隐藏？喜欢b... 查看详情

当单击带有验证的确定按钮时，引导 vue 模式不隐藏

】当单击带有验证的确定按钮时，引导vue模式不隐藏【英文标题】：boostrapvuemodalnothidewhenclickokbuttonwithvalidation【发布时间】：2021-02-1405:46:40【问题描述】：我想向模态窗口添加验证，我需要一种行为，当单击“确定”按钮（表单... 查看详情

关闭引导模式而不使用“隐藏”和“数据关闭”

】关闭引导模式而不使用“隐藏”和“数据关闭”【英文标题】：Closebootstrapmodalwithoutusing"hide"and"data-dismiss"【发布时间】：2013-06-0302:15:34【问题描述】：我想有条件地关闭引导模式框。如果我使用$(\'#modal\').modal(\'... 查看详情

在隐藏引导模式时停止 Youtube 视频

】在隐藏引导模式时停止Youtube视频【英文标题】：StopYoutubevideoonhideabootstrapmodal【发布时间】：2020-07-2110:21:42【问题描述】：我正在尝试以引导模式停止YouTube嵌入视频，但没有任何反应。谁能帮帮我？页面：https://www.visiteumtegra.c... 查看详情

alpineJS 如何在引导模式对话框之外隐藏内容？

】alpineJS如何在引导模式对话框之外隐藏内容？【英文标题】：HowinalpineJStoshadowcontentbeyondbootstrapmodaldialog?【发布时间】：2020-12-1205:53:24【问题描述】：在Bootstrap4.5/jquery3.3/alpinejs2.2应用程序中，我显示具有大小限制的图像并单击... 查看详情

如何使用时间指示器创建引导自动隐藏模式？

】如何使用时间指示器创建引导自动隐藏模式？【英文标题】：HowcanIcreatebootstrapautohidemodalwithtimeindicator?【发布时间】：2021-10-1504:16:14【问题描述】：我有一个模态调用者链接和一个模态如下：<!--modalcaller--><ahref="#"data-togg... 查看详情

在引导模式中提交 Django 表单

】在引导模式中提交Django表单【英文标题】：SubmittingaDjangoForminaBootstrapModal【发布时间】：2014-04-3022:59:45【问题描述】：我是Django新手，我正在尝试弄清楚如何在模态框内提交表单。我有两个有问题的Django应用程序，前端和登录... 查看详情

Jetpack Compose 中 BasicTextField 的焦点有多清晰？

】JetpackCompose中BasicTextField的焦点有多清晰？【英文标题】：HowclearfocusforBasicTextFieldinJetpackCompose?【发布时间】：2021-07-0713:10:21【问题描述】：我有一个JetpackCompose(Beta04)BasicTextField（带有装饰框）。如何清除焦点？我尝试过使用foc... 查看详情

引导模式在 4 秒后关闭或用户单击

...我也只想倒计时4秒。目前，成功消息返回的第二个模态隐藏自身。$(\'#forgotform\').submit(functio 查看详情

如何在 php 中调用引导模式

...布时间】：2016-01-2803:17:32【问题描述】：我正在尝试调用隐藏在另一个模态旁边的html文件中的模态。其中一个在单击按钮时出现，但另一个将由php作为验证过程的一部分调用。这是我的php代码：$File=include("index2.html");$Msg=\'Welcome\... 查看详情

引导模式打开时如何防止滚动正文内容

...我滚动模态后面的内容时，也会滚动。我可以设置溢出：隐藏到正文标签，这解决了这个问题。但是，如果我的模态中有很 查看详情

将数据传递给 laravel 中的引导模式

...我只想从我的设备中取出cod(\'id\')并将其传递到模态中的隐藏字段，但这仅适用于我上面所说的第一个。我认为我的问题出在视 查看详情

引导折叠错误：SyntaxError：字符串与预期的模式不匹配

...相同代码已从类似页面复制，但行不会展开以显示折叠（隐藏）行。相反，我在浏览器控制台上收到上述错误。浏览器 查看详情

模板模式(代码片段)

在不了解模板模式前,我以为它有多深奥多神秘呢,原来我们每天都在用.模板模式,说白了,就是在一个方法中按照逻辑先后,把每个步骤用一个子方法包装起来,而本方法依次调用这些子方法,达到按清晰的顺序执行各步骤的目的.比如... 查看详情

如果为空选择选项，则单击按钮时显示模式引导

...选择了一个选项，但即使没有选择任何内容，我也找不到隐藏警报模式的方法。我使用了一个JavaScr 查看详情

Bootstrap隐藏模式在使用ajax的Rails 6中不起作用

】Bootstrap隐藏模式在使用ajax的Rails6中不起作用【英文标题】：BootstraphidemodalnotworkinginRails6usingajax【发布时间】：2020-02-1018:42:14【问题描述】：我试图通过jquery调用在rails6中隐藏一个引导模式，但经过2周的尝试后，我似乎无法让... 查看详情