Question

我需要弹出一个带有警告的模态对话框，等待警告被确认，然后转发到构建的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。

Answer 1

破解了!!您必须通过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>

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

1 个答案: