如何为Bootstrap模式窗口指定主要和辅助操作？ [英] How do you specify the primary and secondary actions for a Bootstrap modal window?

问题描述

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

I'm using Twitter's Bootstrap modal functionality. When someone clicks submit on my form, I'm testing to see if they have checked any of the available options:

$('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'
            });
        }                                       
    });

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

... and showing the modal window if they haven't. I'd then like the 'primary' button on the modal to continue with the form submit, and the secondary button to simply close the modal window.

我确信这应该是相当简单的，但我目前对jQuery的了解只是在复制/粘贴级别，并且文档没有给出如何做到这一点的例子。

I'm sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn't give an example of how to do this.

我已经设置了一个jsFiddle我拥有的东西在这里 - 谢谢。

I've set up a jsFiddle of what I have here - thanks.

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

EDIT - I've added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:

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

问题现在归结为：'有一个简单的方法单击主按钮后告诉表单好吗，继续？

The question now comes down to: 'is there a simple way to tell the form "okay, carry on" once the primary button is clicked?'

推荐答案

嗯，问题是现在Bootstrap的动作按钮没有任何正确的回调。因此，您必须以迂回的方式执行此操作并创建自己的。希望这会有所帮助！

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!

这是一个JS小提琴，表明它有效： http://jsfiddle.net/iwasrobbed/rYLWz/3/

Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/

以下是代码：

HTML文件

<form>
<ul class="inputs-list">
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option1" />
        <span>Option 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option2" />
        <span>Option 2</span>
      </label>
    </li>
</ul>
<div class="actions">
    <a href="#" class="save-button btn large primary">Save changes &raquo;</a>

    <!-- Hide the real submit button /-->
    <input type="submit" class="hidden">
</div>
</form>

<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Are you sure?</h3>
    </div>
    <div class="modal-body">
        <p>You haven&rsquo;t selected any options.</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="okay-button btn primary">Okay &raquo;</a>
        <a href="#" class="go-back-button btn secondary">Go back</a>
    </div>
</div> <!-- /modal -->

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：

I added a little CSS as well:

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

这篇关于如何为Bootstrap模式窗口指定主要和辅助操作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！