2

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

4

1 回答 1

0

破解它！您必须通过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>
于 2012-09-03T11:22:00.167 回答