除非单击按钮，否则强制基础显示保持打开状态？

Question

我正在使用 Foundation 和 Select2。当我 select select2 selector 中的某些内容时，我的显示关闭。当从下拉列表中 select 或单击 select 以外的任何地方时，会发生这种情况。我不知道是什么原因造成的，我已经禁用 esc 和任何其他关闭显示的方法。我认为一个好的解决方法是只拥有它，以便只有在单击特定按钮时模态才能关闭，其他一切都不会关闭它。

我目前在页面加载时打开模式。

模态 HTML:

<div class="reveal" id="first_open_modal" data-reveal data-options="closeOnClick:false; closeOnEsc: false;">
    <div class="row">
        <h3>Contact Info</h3>
        <hr>
        <div class="row">
            <!-- First Name -->
            <div class="large-4 columns">
                <p>First Name</p>
                <input type="text" id="first_name_input">
            </div>

            <!-- Last Name -->
            <div class="large-4 columns">
                <p>Last Name</p>
                <input type="text" id="last_name_input">
            </div>

            <!-- Phone -->
            <div class="large-4 columns">
                <p>Phone</p>
                <input type="text" id="phone_input">
            </div>

            <!-- Email -->
            <div class="large-12 columns">
                <p>Email</p>
                <input type="email" id="email_input">
            </div> 
        </div>

        <h3 class='last'>School Info</h3>
        <p>After selecting a school, the modal will close and you can begin picking your colors.</p>
        <hr>
        <div class="row">
            <!-- School Name -->
            <div class="large-12 columns">
                <p>School Name</p>
                <!-- <select id="school_input"></select> -->
                <input type="hidden" id="school_input">
            </div> 
        </div>     
    </div>
</div>

选择 2 / Javascript:

// Open Modal
$('#first_open_modal').foundation('open');

// Enable Select2
$("#school_input").select2({
    placeholder: "Lookup a school...",
    minimumInputLength: 3,
    ajax: {
        url: 'http://services.sidearmsports.com/services/globalopponentlookup.ashx',
        dataType: 'jsonp',
        data: function (term) {
            return { school_name: term };
        },
        onselect: function () {
            alert("test");
        },
        results: function (data) {
            var schools = data.schools || [];

            return {
                results: $.map(schools, function (v, i) {
                    return { id: v.school_id, text: v.school_name };
                })
            };

        }
    }
});

Answer 1

问题是 Select2 添加了 .close，这会关闭 select 和基础显示。我通过链接解决了它：

.on("close", function(e){ 
    e.stopPropagation(); 
})

进入 select2。

除非单击按钮，否则强制基础显示保持打开状态？

Force foundation reveal to stay open unless button is clicked?

html

javascript

jquery

zurb-foundation