Html彈出窗體提交

Html彈出窗口我試圖在提交特定窗體時向客戶顯示一個花哨的html彈出框/框架（不是windows樣式）。不知道什麼是最好的做法！Html彈出窗體提交

我嘗試了下面的代碼，但有2個問題。首先，彈出框看起來像一個我不想要的Windows彈出框（瀏覽器類型）。我只想要一個簡單的方框，我可以添加顏色，圖像等。另一個問題是，我的代碼中的鏈接不起作用。例如。我想讓其中一個鏈接在關閉消息框後將我帶到網站上的另一個頁面，而另一個鏈接可以簡單地用於關閉該框......或者可能只是2個鏈接，可以將我帶到2個不同的頁面！

<form action="do.something" method="post" onsubmit="return action_submitted();"> 

<script type="text/javascript"> 

    function action_submitted() { 
     HTML = ''; 
     HTML += '<html><head><title>New Action</title></head>'; 
     HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">'; 
     HTML += 'Congrats, your action was successful! <br/>'; 
     HTML += '<a href="close">Close Message</a><br/>'; 
     HTML += '<a href="/gothere.do">There</a><br/>'; 
     HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>'; 
     HTML += '</body></html>'; 
     var w = 500; 
     var h = 200; 
     var l = (screen.availWidth - w)/2; 
     var t = (screen.availHeight - h)/2; 
     actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0'); 

     if (actionwin && !actionwin.closed) actionwin.focus(); 
        return true; 
       } 

</script>

請幫助:)

非常感謝！

來源

2012-04-19 user1343108

這樣的彈出式窗口通常稱爲模式對話框或類似窗口。您可以在Google中找到很多插件。我在http://www.ericmmartin.com/projects/simplemodal/之前使用過這個 – elclanrs 2012-04-19 06:15:38

嘗試使用jQuery模態對話框：

var modal = "<div id='modal_pop'>" + 
      "<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" + 
      "<p>This is a fancy modal pop up.</p>" + 
      "</div>";

，並呼籲該site模態對話框

$(modal).dialog({ 
      modal: true, 
      width: 400, 
      height: opts.windowHeight, 
      closeOnEscape: false, 
      draggable: false, 
      resizable: false, 
      zIndex: 99999, 
      bgiframe: true, 
      title: Sample!', 
      buttons: { 
       "OK": function() { 
       // your action on OK clikc 
       $(this).dialog('close'); 
             }, 
       "Cancel": function() { 
        $(this).dialog('close'); 
       } 
      } 
     });

更多信息。

來源

2012-04-19 06:42:28 TRR

我建議你需要在HTML底部創建彈出div。默認情況下隱藏彈出窗口通過CSS，當你想打開它，然後通過javascript顯示它，並傳遞你想要顯示的內容，如果你有動態內容。

HTML

<div id="popupWrapper"> 
    <div id="popup"> 
     content goes here 
    </div> 
</div>

CSS

#popupWrapper { display: none;}

jQuery的

$('#button').live('click', function() { 
    $('#popup').text('content goes here'); 
    $('#popupWrapper').fadeIn(); 
});

因爲在你的情況你每次點擊按鈕時重新創建一個poup。這不是一個好辦法。

也不要使用任何其他插件，因爲它不適合使用第三方插件的簡單東西。這會讓你的項目變得更加複雜和緩慢。因爲他們設計了多種選擇的多種情況，並且如果你不需要這個意思，那麼使用該插件是值得的。

來源

2012-04-19 07:36:05 Tarun

Html彈出窗體提交

回答

相關問題