Question

我在这里有一点大脑弯曲：

基本上，我要做的是渲染一个漂亮的，可搜索的复选框列表作为select2控件的替代UI。基本上，我的用户点击“添加许多”按钮，弹出一个模态对话框，然后他们选择他们的选项。我正在使用jquery多选小部件和我找到的淘汰绑定处理程序。它似乎运行良好，但我希望默认情况下打开框，这样它看起来更像是一个经典的.net复选框列表...所以，我将autoOpen：true传递给multiselect但是它在右上角打开了dom而不是与多选文本对齐。如果您单击多选文本，然后再次单击它，请更改columbo oreo - 它会在正确的位置打开！

我相信正在发生的事情是，在加载时我的盒子已经使用模态将其刚刚移出屏幕。因此，当我打开模态时，它会移动到屏幕但处于不良位置，即没有靠近按钮的位置。

我认为我应该做的是调用类似的东西：

$('.selector').multiselect({ show: 'fadeIn' });

一旦模态已经加载，

或其他类似的效果，所以位置将是正确的。但是，我不知道如何用淘汰赛做到这一点。任何帮助将不胜感激 - 我通过在这个小提琴中苦心地重新创造问题来匹配努力;）：

以下是我的模态现在的样子以及与我的小提琴的链接......

<div data-bind="modal: AddManyItem">
<div class="modal-header"> <a class="close" data-dismiss="modal">×</a>

     <h3>Add Many</h3>
</div>
<div class="modal-body">
    <select data-bind="multiSelectCheck: $data.Opts, 
                            multiselectOptions: 
                            { autoOpen: true },
                            optionsCaption: 'Check one or more', 
                            selectedOptions: $data.Vals, 
                            optionsText: 'Text'" multiple="multiple"></select>
</div>
<div class="modal-footer"> <a href="#" class="btn btn-primary" >Save changes</a>

</div>
</div>

参见JSFiddle：http://jsfiddle.net/valvemail/W7E5N/15/

还有一个注意事项 - 如果这有所不同，这是一个自助模式。

Answer 1

为什么不使用选择器来触发按钮，该按钮会在模态加载后显示复选框。

请参阅小提琴：http://jsfiddle.net/mdcuesta/W7E5N/24/

<div class="modal-body" id="modal-checkbox">
    <select data-bind="multiSelectCheck: $data.Opts, 
                            multiselectOptions: 
                            { autoOpen: false },
                            optionsCaption: 'Check one or more', 
                            selectedOptions: $data.Vals, 
                            optionsText: 'Text'
                            " multiple="multiple"></select>
</div>

将autoOpen设置为false并向模态正文添加Id

viewModel.NewAddManyItem = function (data, event) {
var self = this;
viewModel.AddManyItem({
    FilterText: ko.observable("stuff"),
    FilteredResults: ko.observable([]),
    IsGeo: false,
    Vals: ko.observableArray([]),
    Opts: ko.observableArray(viewModel.OptList())
    });    
    self.ShowSelect();
};

viewModel.ShowSelect = function(){
   $('#modal-checkbox .ui-multiselect').click();
};

在模型中添加一个方法，该方法将处理按钮单击以显示复选框

你的理论是正确的，在造成你的问题的模式之前已经提交了下拉列表。

jquery multiselect里面淘汰模态对话框自动打开定位错误

1 个答案: