如何为Bootstrap模式窗口指定主要和辅助操作？

我正在使用Twitter的Bootstrap模态function 。 当有人点击我的表单上的提交时，我正在测试他们是否检查了任何可用的选项：

$('form').submit(function(event) { var $target = $('.column').find(':checkbox'); if( !$target.is(':checked') ){ // if none of the sub-options are checked event.preventDefault(); $('#my-modal').modal({ show: 'true', backdrop: 'true', keyboard: 'true' }); } }); 

…并显示模态窗口，如果他们没有。 然后我喜欢模态上的“主要”按钮继续表单提交，而次要按钮则只需关闭模态窗口。

我确信这应该是相当简单的，但我目前对jQuery的了解只是在复制/粘贴级别，文档没有给出如何执行此操作的示例。

我已经建立了一个jsFiddle，我在这里 – 谢谢。

编辑 – 我在下面添加了一些代码（感觉有点hacky），当点击辅助按钮时将关闭模态窗口。 单击主按钮时仍不确定如何使表单继续运行：

 $('#my-modal .secondary').click(function() { $('#my-modal').modal({ show: 'false' }); }); 

现在的问题归结为 ：“有没有一种简单的方法来告诉表单”好的，一旦点击主按钮就继续“？

Answer 1

好吧，问题是，现在Bootstrap没有任何适当的回调function按钮。 因此，你必须以迂回的方式做到这一点，并创建自己的。 希望这可以帮助！

这是一个JS小提琴显示它的工作： http ： //jsfiddle.net/iwasrobbed/rYLWz/3/

这是代码：

HTML文件

 
 
 
   Option 1  
 
   Option 2  
 
 
 Save changes »   
 
 
 
 × 
Are you sure?
 
 
 
You haven’t selected any options.
 
 
 Okay » Go back 
 
  

JS档案

 $(document).ready(function() { // Verify if checkboxes were checked. // If they weren't, show a modal $('a.save-button').click(function() { if ($("input:checked").length === 0) { $('#my-modal').modal({ show: 'true', backdrop: 'true', keyboard: 'true' }); } else { $('form').submit(); } // prevent click jump return false; }); // Let's attach a listener on form submission $('form').submit(function() { alert('We submitted the form!'); }); // Hide modal if "Go back" is pressed $('#my-modal .go-back-button').click(function() { $('#my-modal').modal('hide'); alert('We went back to the form'); }); // Hide modal if "Okay" is pressed $('#my-modal .okay-button').click(function() { $('#my-modal').modal('hide'); $('form').submit(); }); }); 

我还添加了一些CSS：

 ul.inputs-list li { margin-left: 10px; } .hidden { display: none }