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

Question

首先，如果文本框中没有值，我想隐藏模式。其次，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');
        }
    });
    });

Answer 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 供您参考