如何在提交表單前進行模態確認對話框？

我是網絡/ JavaScript編程的初學者，想知道是否有人可以給我一個簡單的模式確認對話框的簡單例子，就在使用預定義按鈕提交多個提交按鈕的表單之前？我偶然發現了jQuery和SimpleModal，並想知道它是否適合我的ASP MVC項目。如何在提交表單前進行模態確認對話框？

我在下面的非工作代碼結束了，我想我的第一個問題是不知道如何從對話框？：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("form").submit(function(ev) { 
      return confirm("Confirm?"); 
     }); 
    }); 

    function confirm(message) { 
     $("#confirm").modal({ 
      close: true, 
      overlayId: "confirmModalOverlay", 
      containerId: "confirmModalContainer", 
      onShow: function modalShow(dialog) { 
       dialog.overlay.fadeIn("slow", function() { 
        dialog.container.fadeIn("fast", function() { 
         dialog.data.hide().slideDown("slow"); 
        }); 
       }); 

       dialog.data.find(".confirmMessage").append(message); 
       dialog.data.find(".btnYes").click(function() { 
        $.modal.close();          
       }); 
      } 
     }) 
    }   
</script> 


<div id="confirm" style="display:none"> 
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a> 
    <div class="confirmHeader"><span>Confirm</span></div> 
    <p class="confirmMessage"></p> 
    <div class="buttons"> 
     <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div> 
    </div> 
</div>

這將是很好，如果有人告訴我返回一個值某處在線瀏覽網頁編程速成課程:)

來源

2009-07-30 William

你不能有一個模態對話框，因爲它會劫持瀏覽器的顯示其他選項卡的能力。（不，這是不可接受的。）然而，你可以用JavaScript來在頁面上疊加一層，我將留給其他人解釋。 – 2009-07-30 07:52:12

我已經更新了我的答案，爲您的腳本添加了一個可能的boxy實現。 – LiamGu 2009-07-30 08:22:20

就我個人而言，我沒有那麼麻煩。

Boxy是一個jQuery插件，已經有一個確認框控件。

它的示例如下：

$('#confirm-actuator').click(function() { 
    Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'}); 
    return false; 
});

如果你看一看四四方方的網站本身，它也將告訴你如何檢索提交的值等

編輯：執行情況你會....

$(document).ready(function() { 
    $("form").submit(function(ev) { 
     $('#mySubmitBtn').click(function() { 
      Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'}); 
      return false; 
     }); 
    }); 

});

，然後將一個ID上mySubmitBtn的提交按鈕。

我還沒有測試過這個代碼，但應該有希望做到這一點。

希望這會有所幫助。

儘管根據開發人員的不同，這種方法是而不是，它旨在替代瀏覽器提供的本地window.confirm（）函數，因爲它無法在對話框可見時阻止程序執行。

但是，我不認爲這會影響你的表單提交，所以你應該都很好用這個方法。

來源

2009-07-30 07:54:53 LiamGu

非常感謝您的幫助。我嘗試過Boxy，並在所有這些javascript的東西上學到了更多。然而，我不能得到它的工作太好，我最終使用另一個jQuery插件（用於讀取/設置隱藏字段的字段插件）和內置的確認對話框爲我當前的項目。 – William 2009-07-30 09:25:53

你是什麼意思，不能讓它工作得太好？我第一次嘗試使用它時遇到了一些問題，但如果可以，我很樂意提供幫助。不要忘了投票並標記爲答案，如果它的方式有所幫助。雖然我自己是新來的，所以我不確定是否每個人都這麼做。 – LiamGu 2009-07-30 09:52:32

提交表單時，您不需要使用jquery進行簡單的模態確認對話框。瀏覽器提供了幾個模態系統查看對話框。一個是「確認」。

這種簡單的JavaScript會做：

<form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')"> 
... 
</form>

對於一個速成班，你可以檢查出W3Schools或只是谷歌搜索教程。

來源

2009-07-30 07:51:34

這裏有3種不同的方式來完成這個細分：

Modal Confirmation Dialog on Form Submit

來源

2009-08-11 21:02:11

如何在提交表單前進行模態確認對話框？

回答

相關問題