为啥 Bootstrap data-dismiss 和 modal('hide') 不起作用？

Posted 2023-05-08

【中文标题】为啥 Bootstrap data-dismiss 和 modal(\'hide\') 不起作用？

【英文标题】：Why Bootstrap data-dismiss and modal('hide') are not working?为什么 Bootstrap data-dismiss 和 modal('hide') 不起作用？

【发布时间】：2018-07-02 20:16:34

【问题描述】：

首先，如果文本框中没有值，我想隐藏模式。其次，data-dismiss 不起作用。我在代码中没有看到任何问题。有什么猜测吗？请给我建议。

/My form
    @using (html.BeginForm("Index", "Home", FormMethod.Post))
       
       @Html.TextBoxFor(m => m.txtName)
       @Html.HiddenFor(m => m.hiddenNameId)
       @Html.ValidationMessageFor(m => m.txtName, "", new  @class = "error" )
       <button type="submit" id="submit" data-toggle="modal" data-target="#myModal">Produce Page</button>      
     

//My Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
    ...
            <div class="modal-header">
                ...
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
  </div>

//Script

$(function () 
    $('#submit').click(function () 
        var value = $('#txtName').val(); 
        if (value) 
            $("#myModal").modal('show');
        
        else 
            $("#myModal").modal('hide');
        
    );
    );

【问题讨论】：

你是否包含了 jquery？这些方法需要 jQuery 才能工作。 （以及bootstrap[.min].js）getbootstrap.com/docs/3.3/javascript

【参考方案1】：

您总是得到模型，因为您的按钮已连接到使用标记触发它，使用按钮标记中的data-toggle 和data-target 属性。

删除那些，现在当用户点击按钮时它不会触发模式对话框。

<button type="submit" id="submit" >Produce Page</button>      

当单击按钮时，您的 javacsript 代码（您连接的单击事件处理程序）将被执行，这将根据txtName 输入的值有条件地显示模式对话框。

另外，您可能不需要代码来隐藏它。因为 use 会在 modal 不存在时点击按钮（所以背景上的按钮是可点击的）。在这种情况下，您需要做的就是在 if 条件通过时显示模态对话框。

$(function () 
    $('#submit').click(function (e) 
        e.preventDefault();
        var value = $('#txtName').val();
        if (value) 
            $("#myModal").modal('show');
        
    );
);

关于不关闭模式对话框的第二个问题，只要您有关闭按钮的正确标记（具有所需属性），它就应该可以工作。 （在您的问题中，您没有发布完整的标记）。这是working jsbin 供您参考

【讨论】：

谢谢你。但是我的close 按钮不起作用。

e.preventDefault(); 阻止了我的@Html.ValidationMessageFor(m => m.txtName, "", new @class = "error" )

关闭按钮应该可以正常工作。与这个 jsbin jsbin.com/wifixuw/edit?html,output 比较，看看缺少什么。您始终可以在 javascript 中触发 jQuery 验证。例如：var isFormValid = $(#someFormId").valid();

如果我删除e.preventDefault();，那么我的@Html.ValidationMessageFor(m => m.txtName, "", new @class = "error" ) 工作得很好。但是，如果我将其包括在内，那么我的验证将不起作用。即使您提供的链接也无需验证即可使用。请在我的场景中指导我。谢谢。

如果您不阻止默认行为，您的表单将执行正常的表单提交，因为单击的按钮位于表单标签内。正如我在之前的评论中提到的，您始终可以使用 javascript 启动验证。仔细阅读前面的评论。如果需要，您可以在客户端浏览器中显示验证消息（或任何内容），因为 javascript 代码可以根据需要更新 DOM。