Question

我正在使用Foundation和Select2。当我在select2选择器中选择一些东西时，我的显示会关闭。从下拉列表中选择或单击选择之外的任何位置时会发生这种情况。我不知道造成这种情况的原因是什么，我已经禁用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>

Select2 / 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，这将关闭选择和基础揭示。我通过链接来解决它：

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

到select2上。

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

1 个答案: