如何使用Bootstrap Modal以便在会话过期之前警告用户?

时间:2018-07-21 15:00:01

标签: javascript asp.net modal-dialog bootstrap-4

我有一个ASP.Net Web应用程序,并且我使用以下代码来在会话期满之前警告用户

1。 JS代码:

<script type="text/javascript">
    function SessionExpireAlert(timeout) {
        var seconds = timeout / 1000;
        document.getElementsByName("secondsIdle").innerHTML = seconds;
        document.getElementsByName("seconds").innerHTML = seconds;
        setInterval(function () {
            seconds--;
            document.getElementById("seconds").innerHTML = seconds;
            document.getElementById("secondsIdle").innerHTML = seconds;
        }, 1000);
        setTimeout(function () {
            //Show Popup before 20 seconds of timeout.
            $find("mpeTimeout").show();
        }, timeout - 120 * 1000);
        setTimeout(function () {
            window.location = "../TimeOut.aspx";
        }, timeout);
    };

    function ResetSession() {
        //Redirect to refresh Session.
        window.location = window.location.href;
    }
</script>

2。 MasterPage代码背后的代码:

if (!this.IsPostBack)
    {   
      Session["Reset"] = true;
      Configuration config = WebConfigurationManager.OpenWebConfiguration("~/Web.Config");
      SessionStateSection section = (SessionStateSection)config.GetSection("system.web/sessionState");
      int timeout = (int)section.Timeout.TotalMinutes * 1000 * 60;

      Page.ClientScript.RegisterStartupScript(this.GetType(), "SessionAlert", "SessionExpireAlert(" + timeout + ");", true);
    }

3。母版页代码:

<asp:ScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:LinkButton ID="lnkFake" runat="server" />
    <asp:ModalPopupExtender ID="mpeTimeout" BehaviorID="mpeTimeout" runat="server" PopupControlID="#gobaSessionTimeOutModal" TargetControlID="lnkFake"
        OkControlID="btnYes" CancelControlID="btnNo" OnOkScript="ResetSession()">
    </asp:ModalPopupExtender>


     <div class="modal fade" id="gobaSessionTimeOutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">Oturumunuz sonlanmak üzere!..</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>
                            Oturum süreniz &nbsp;<span id="seconds"></span>&nbsp;saniye içinde dolacak.<br />
                            Oturumunuzu sürdürmek istiyor musunuz?
                        </p>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnYes" runat="server" Text="Evet" CssClass="btn btn-secondary" Width="80px" />
                        <asp:Button ID="btnNo" runat="server" Text="Hayır" CssClass="btn btn-primary" Width="80px" />

                    </div>
                </div>
            </div>
        </div>

任何人都可以检查这些代码并让我知道为什么模态不显示吗?

非常感谢。

0 个答案:

没有答案