Question

我正在JavaScript函数中使用jQuery，以便显示对话以显示会话超时弹出窗口。由于某种原因，模型对话框根本无法打开。

我尝试移动div并尝试以Internet上显示的不同方式调用jQuery，但仍然没有打开模型对话框。

timeout_popup_function = null;

function checkSession() {
    alert('Check session is called');
    var sessionExpiry = Math.abs(getCookie('sessionExpiry'));
    var timeOffset = Math.abs(getCookie('clientTimeOffset'));
    var localTime = (new Date()).getTime();
    alert("localTime is@@" + localTime);
    if (localTime - timeOffset > (sessionExpiry + 15000)) {
        var mins = 1;  //Set the number of minutes you need
        var secs = mins * 60;
        var currentSeconds = 0;
        var currentMinutes = 0;
        timeout_popup_function();
        setTimeout(Decrement(secs), 1000);
    }
    else {
        setTimeout('checkSession()', 10000);
    }
};

setInterval(checkSession, 30000);

$(function($) {
    function ShowTimeoutWarning() {
        alert('222');
        //$("#timeoutdialog").dialog("open");
        $("#timeoutdialog").dialog({
            autoOpen: false,
            dialogClass: "no-close",
            position: 'center',
            title: 'session',
            draggable: false,
            width: 300,
            height: 200,
            resizable: false,
            modal: true,
            buttons: [{
                text: "OK",
                click: function() {
                    ShowTimeoutWarning();
                    $(this).dialog("close");
                }
            }]
        });
        //return false;
    }
    timeout_popup_function = ShowTimeoutWarning;
})

HTML：

<div id="timeoutdialog" title="Session Expiry"
     style="display:none">
    <p>
        Your session will expire in</p>
        <p id="timerText">30</p>
        <p>. If you wish to extend your
            session, please click extend.
        </p>
</div>

我在这里想念什么？

Answer 1

根据jQueryUI docs，您应该首先初始化对话框，然后在对话框元素上调用dialog("open")。

window.onload = function() {
  // Initiate the dialog, for example in window.onload or $(document).ready().
  $("#timeoutdialog").dialog({
    autoOpen: false,
    dialogClass: "no-close",
    position: 'center',
    title: 'session',
    draggable: false,
    width: 300,
    height: 300,
    resizable: false,
    modal: true,
    buttons: [{
      text: "OK",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  
  ShowTimeoutWarning();
}

function ShowTimeoutWarning() {
  // Simply call $.dialog("open") to open the dialog
  $('#timeoutdialog').dialog("open");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<div id="timeoutdialog" title="Session Expiry">
  <p>Your session will expire in</p>
  <p id="timerText"> 30 </p>
  <p>If you wish to extend your session, please click extend.</p>
</div>

纳入JavaScript后，jQuery对话框无法打开

HTML：

1 个答案: