【问题标题】:Close Modal after click on submit button (ajax sucess)单击提交按钮后关闭模态框(ajax 成功)
【发布时间】:2017-07-11 10:39:04
【问题描述】:

我知道这个问题已经在 StackOverflow 中被问过几次,但我无法根据给出的建议让它在我的情况下工作。

所以我认为基本上我有这个模式:

<div id="createFolderModal" class="modal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <!- (...) -->
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <fieldset>
                    <div class="form-group">
            <!- (...) -->
                    </div>
                </fieldset>
            </form>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary" onclick="createFolder()">Create</button>
        </div>
    </div>
</div>

此模态通过单击按钮打开:

$('#newFolderButton').on('click', function () {
        $('#createFolderModal').show();
    });

那么我的脚本是:

function createFolder() {
        // (...)

        $.ajax({
            type: "Post",
            url: '@Url.Action("CreateFolder", "ManageFiles")',
            data: { name: path },
            dataType: "json",
            traditional: true,
            success: function (data) {
                //close the modal
                $('#createFolderModal').modal('hide');
                //$('#createFolderModal').modal('toggle');

                document.getElementById("inputFolderName").value = ""; // to empty the input field
            }
        });
    }

所以,如您所见,我已经尝试了以下说明,但均未奏效。在 StackOverflow 上有关此的所有帖子中,这是唯一的建议,所以我不知道我的情况可能有什么问题。

$('#createFolderModal').modal('hide');
$('#createFolderModal').modal('toggle');

还在我的按钮内尝试了 data-dismiss="modal" ,但没有成功。

提前感谢您的帮助。

【问题讨论】:

  • 你能检查一下这个$('#createFolderModal').removeClass('show');
  • $('#createFolderModal').hide(); 怎么样?
  • 如果你想关闭模式,你必须使用modal("show")modal("hide")。不是show() / hide() 方法
  • @BasantaMatia 感谢您的建议,但对我来说不起作用。
  • @Ignatius 非常感谢,它成功了!

标签: jquery ajax twitter-bootstrap modal-dialog bootstrap-modal


【解决方案1】:

代替

$('#createFolderModal').modal();

使用

$('#createFolderModal').show(); to open the dialog 

然后

$('#createFolderModal').modal('hide'); to hide it.

【讨论】:

  • @myusername21 试试这个解决方案
  • @myusername21,这就是 bootstrap 推荐的方式。
猜你喜欢
  • 1970-01-01
  • 2019-04-26
  • 1970-01-01
  • 1970-01-01
  • 2018-03-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多