2012-08-31 67 views
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> 

您需要jQuerysimplemodal

+0

window.location ='http://www.google.co.uk?as_q ='+ s;應該有條件依賴用戶輸入。 –

+0

這只是演示。最終的代碼將重定向到另一個位置。 ...在這種情況下,它**是**條件是他們按下了哪個按鈕。 – OldCurmudgeon

回答

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>