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

Posted 2023-02-22

【中文标题】如何为 Bootstrap 模式窗口指定主要和次要操作？

【英文标题】：How do you specify the primary and secondary actions for a Bootstrap modal window?

【发布时间】：2012-01-01 07:00:42

【问题描述】：

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

$('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 的了解只是在复制/粘贴级别，并且文档没有给出如何做到这一点的示例。

我已经为我所拥有的 here 设置了一个 jsFiddle - 谢谢。

编辑 - 我在下面添加了一些代码（感觉有点骇人听闻），当点击辅助按钮时会关闭模式窗口。仍然不确定单击主按钮时如何继续执行表单：

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

现在的问题归结为：'有没有一种简单的方法可以在单击主按钮后告诉表单“好的，继续”？'

【问题讨论】：

布尔值不是字符串。你想要false 而不是"false"（注意引号）。您输入"false" 的方式实际上计算为true。

【参考方案1】：

好吧，问题是现在 Bootstrap 没有任何适当的回调来处理他们的操作按钮。因此，您必须以迂回的方式执行此操作并创建自己的。希望这会有所帮助！

这是一个 JS fiddle 展示它的工作原理：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：

ul.inputs-list li 
    margin-left: 10px;

.hidden 
    display: none   

【讨论】：

我不喜欢“伪造”表单提交，但希望 Bootstrap 的 v2.0 将包含适当的回调，以缓解我的强迫症部分对象。在那之前，这正是我所需要的——谢谢。

是的，我支持你。 Bootstrap 是一个很好的基础，但仍然缺乏某些功能。很高兴为您提供帮助