Twitter Bootstrap 2模态表单对话框

我有以下对话框forms：

 
 × 
Add Tags
 
 
 
   
 
 
 
 
  

和他的JS：

  //  

当我点击x，这是× ，表单关闭，让我留在当前页面上，而我想继续浏览hamepage。

另外“添加标签”按钮，即

什么都不做，点击键盘上的jaust ENTER完成工作，我想点击“添加标签”也是这样做的。

我对JS和前端编程不是很熟练，所以欢迎任何帮助。

Answer 1

您的提交按钮位于表单标记之外。
它不知道提交什么forms。

使用javascript将其连接到表单。

 
 
  
 
 
 Submit 
  

至于应该链接到主页的× ，为什么不删除data-dismiss='modal'并使其表现得像使用标准href='home.html'普通链接。

下面是一些额外的代码，指出您使用AJAX提交表单的正确方向：

 // Since we want both pressing 'Enter' and clicking the button to work // We'll subscribe to the submit event, which is triggered by both $('#modal-form').on('submit', function(){ //Serialize the form and post it to the server $.post("/yourReceivingPage", $(this).serialize(), function(){ // When this executes, we know the form was submitted // To give some time for the animation, // let's add a delay of 200 ms before the redirect var delay = 200; setTimeout(function(){ window.location.href = 'successUrl.html'; }, delay); // Hide the modal $("#my-modal").modal('hide'); }); // Stop the normal form submission return false; }); 

Answer 2

要获取提交按钮的工作，请将其放在表单中。

 
 
 
 × 
A Modal Form
 
 
  
 
 Cancel  
 
  

但是，这会在模态的底部增加意外的余量。 Bootstrap 2.0.2引入了modal-form类来修复它，或者你可以使用样式定义自己修复它：

 .modal > form { margin-bottom: 0; } 

为了在关闭模态时链接到另一个页面，我将使用TheShellfishMeme

对于应该链接到主页的×，为什么不删除data-dismiss =’modal’并使其使用标准href =’home.html’作为普通链接。

Answer 3

使用HTML5，您可以使用以下内容：

 
 
 × 
Add Tags
 
 
 
 
   
   
 
 
 
 
  

如果您需要支持所有浏览器+旧版本，那么这需要支持HTML5 表单相关元素 ，那么您需要使用JavaScript，但是您可以使用JavaScript作为后备:)

Answer 4

提交表单的问题在于bootstrap自己的JS模态库（bootstrap-modal.js） – 由于第204行： ev.preventDefault （为什么？），基本提交事件被阻止了。

我的解决方案是添加：

 if(!$(e.target).parents('form')) e.preventDefault(); 

但是我不知道它会产生什么问题。

Answer 5

仅供参考您可以执行以下操作（以玉写）：

 .modal.hide.fadel form.modal-form .modal-header button.close type='button' data-dismiss="modal" x h3= t 'translation' .modal-body p hello .modal-footer button.btn data-dismiss="modal" href="#" = t 'close' a.btn.btn-primary data-dismiss="modal" data-remote="true" href="#"= t 'form.submit'