弹出格式化的模式对话框，并在用户确认时转发

Popup a formatted modal dialog and forward when user acknowledges

本文关键字：用户 确认 转发 格式化 模式 对话框      更新时间：2023-09-26

我需要弹出一个带有警告的模式对话框，等待警告得到确认，然后转发到一个构建的url。我当前的尝试在窗口中显示对话框并立即转发。

我需要每个链接（示例中的按钮）都能够将参数传递到最终的url，因此需要在onclick中执行。html将从jsp中生成。

请参阅以下演示：

<html>
  <head></head>
  <body>
    <div id='container'>
      <input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
      <br />
      <br />
      <input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
      <br />
      <br />
    </div>
    <div id="dialog" style="display: none">
      <em>Going to Google</em>
      <hr />
      <ul>
        <li>No guarantee is made that this will work.</li>
        <li>We take no responsibility for the consequences of this action.</li>
      </ul>
    </div>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
    <script>
    function Google(s) { 
        // Replace this.
        //alert("Going to: "+s); 
        // What to do here to popup a formatted dialog in place of the alert, wait for it to be acknowledged and then proceed with the forward.
        // Doesn't work.
        jQuery("#dialog").modal(); 
        window.location='http://www.google.co.uk?as_q='+s; 
    }
    </script>
  </body>
</html>

您将需要jQuery和simplemodal。

破解了！！您必须通过onClose进行转发。

请注意，我将对话框div的类设置为simplemodal-close，因此单击其中的任何位置都被视为关闭。这是因为这是一个触摸屏驱动的工具。

<html>
  <head>
  <style>
    #simplemodal-container {
        background-color:#afafaf; 
        border:solid; 
        padding:12px; 
        cursor:pointer
    }
  </style>
  </head>
  <body>
    <div id='container'>
      <br />
      <br />
      <input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
      <br />
      <br />
      <input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
      <br />
      <br />
    </div>
    <div id="dialog" class="simplemodal-close" style="display: none">
      <em>Going to Google</em>
      <hr />
      <ul>
        <li>No guarantee is made that this will work.</li>
        <li>We take no responsibility for the consequences of this action.</li>
      </ul>
    </div>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
    <script>
    function Google(s) { 
        $.modal($('#dialog'),{
            onClose: function (dialog) {
                window.location='http://www.google.co.uk?as_q='+s;
            }}
        );
    }
    </script>
  </body>
</html>
相关文章：