Question

我已经为我的网站使用了一个弹出窗口。弹出窗口实际上是用于更改密码.. 当我填写数据来更改密码时，它完美地工作... 给出弹出窗口的链接：

<div id="abc"></div>
<div>
    <a href="#" class="passwordlink" data-id=" Model.ProfileView.Password">Change Password</a>
</div>

我使用右上方的关闭按钮关闭弹出窗口[x]，没有实际填充任何数据（假设错误打开时），再次尝试打开它，没有任何反应......弹出窗口停止工作.. 当发生这种情况时，我会在网址中附加哈希[＃]，当我每次手动删除它时，弹出窗口工作，否则它不会... 知道如何去做，如果我从href中删除＃，而不是从网址中删除它，弹出窗口只持续几秒钟并自行关闭......

我的完整代码：更改密码

<script src="~/Scripts/app-password.js/passwordupdate.js"></script>

在脚本文件夹中： 1）打开包含部分视图（称为PasswordUpdate）的弹出框以更改密码。此视图包含更改密码的字段，右上方的关闭按钮[x]和保存按钮..

$("#abc").dialog({
autoOpen: false,
modal: true,
width: 450,
title: "Password Updation"
});

$(".passwordlink").click(function () {
var id = $(this).attr("data-id");
$.ajax({
    // Call CreatePartialView action method
    url: "/Channel/PasswordUpdate",
    type: 'Get',
    data: { Password: id },
    success: function (data) {
        $("#abc").dialog("open");
        $("#abc").append(data);

    },
    error: function () {
        alert("something seems wrong");
    }
});
});

我在popup中的部分视图： @model StudiModel.StudiPasswordUpdation

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div style="text-align: center">
    <div class="form-horizontal">
        <h4>Password Updation</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            Current Password
            <div id="currentpassword">
                @Html.PasswordFor(model => model.currentPassword)
                @Html.ValidationMessageFor(model => model.currentPassword)
            </div>
        </div>

        <div class="form-group">
            New Password
            <div id="newpassword">
                @Html.PasswordFor(model => model.newPassword)
                @Html.ValidationMessageFor(model => model.newPassword)
            </div>
        </div>

        <div class="form-group">
            Confirm New Password
            <div id="confirmnewpassword">
                @Html.PasswordFor(model => model.confirmNewPassword)
                @Html.ValidationMessageFor(model => model.confirmNewPassword)
            </div>
        </div>

        <div id="submit-button"></div>
        <div class="form"><div class="link_right"><button type="submit" class="orange" value="Save">Save</button></div></div>           
    </div>
</div>


<div class="footer"></div>
<link rel="stylesheet" href="~/css/accodation-styles.css">
<link rel="stylesheet" href="~/css/datepicker.css">
<link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/js/accodation-script.js"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">      </script>
<script type="text/javascript" src="~/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/app-password.js/passwordpartial.js"></script>   
}

点击弹出的PasswordUpdate局部视图中的保存按钮，密码更新发生.. $（＆＃34;＃submit-button＆＃34;）。click（function（）{ //在提交按钮上单击关闭对话框 $（＆＃34;＃ABC＆＃34）的对话框。（＆＃34;靠近＆＃34）;

//Set inserted vlaues
var currentpassword = $("#currentpassword").val();
var newpassword = $("#newassword").val();
var confirmnewpassword = $("#confirmnewpassword").val();

// Call Create action method
$.post('~/Channel/PasswordUpdate', { "currentpassword": currentpassword, "newpassword":  newpassword, "confirmnewpassword": confirmnewpassword },
    function (data) {
        alert("data is posted successfully");
        window.location.reload(true);

    });
});

到目前为止它很好..问题是关闭按钮，打开弹出窗口并关闭而不使用关闭按钮[x]输入值，链接＆＃34;更改密码＆＃34;除非再次加载页面，否则停止工作...

Answer 1

只需使用href=""代替href="#"即可。

顺便说一句：你为什么要使用<a>-Tag?

Answer 2

相反，您可以使用data-role：popup属性，

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<div data-role="popup" id="myPopup">
"ur code"
</div>

关闭时弹出窗口不会再次打开

2 个答案: