在下拉列表选择中显示模态
Show modal on drop down list selection
我有一个包含下拉列表的模式,在选择/onchange事件时,我希望新视图以模式显示。我已经使用这个解决方案来实现多模式覆盖,并尝试将javascript从onclick更改为on change,但没有成功
我的部分视图
@using (Html.BeginForm("GameAssignerTable", "Admin", FormMethod.Post, new {role = "form"}))
{
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h3 class="modal-title">Select Investigator Group</h3>
</div>
<div class="modal-body">
@Html.DropDownListFor(m => m.SelectedGroupUserId, Model.GroupList, "Select Investigator Group", new { @class = "form-control modal-link3", onchange = "this.form.submit();" })
</div>
}
我的布局页面
<div class="container">
<div class="row">
<div id="modal-container3" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content col-sm-8 col-lg-offset-2">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('show.bs.modal', '.modal', function() {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
// Initialize popover
$(function() {
$('[data-toggle="popover"]').popover({ html: true });
});
// Used for modals
$(function() {
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('change', '.modal-link3', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container3');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function() {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container3').on('hidden.bs.modal', function() {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function() {
return false;
});
});
</script>
我建议将JS拉出到像其他处理程序一样的处理程序中,并执行以下操作:
$("#@Html.IdFor(m => m.SelectedGroupUserId)").on("change", function(e) {
$(this).closest("form").trigger("submit");
});
请注意,这会提交表单,并返回到操作。然后,该操作将返回某种视图来显示结果。您指示了另一个模态,但同步回发会使您脱离当前视图。
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何在单击/接受/确认按钮后不再显示模态
- 如何从url中显示模态内部的信息
- 在下拉列表选择中显示模态
- 在表单提交后显示模态,直到加载下一页为止..不适用于狩猎
- 仅使用JAVASCRIPT单击链接或文本时显示模态
- 如何在单击表行时显示模态
- 显示模态对话;在 IE 中打开一个新窗口
- 在顶部框架上显示模态弹出窗口
- 如何在用户离开网页时显示模态窗口
- 获取 AngularJS 应用程序以在单击时显示模态
- 显示模态时未触发 Twitter 引导模态事件
- Twitter Bootstrap v3.0.0 未显示模态组件
- React - 如何填充和显示模态,然后在提交时发送 AJAX 请求
- 跨浏览器显示模态对话框替换
- 铬CEF显示模态对话问题
- 显示模态并在循环时等待每个元素的操作
- PHP中用于显示模态的Echo Javascript函数显示不正确
- 当点击rails中的提交按钮时,如何在重定向到下一页之前显示模态
- Foundation 5显示模态未打开