Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述:
当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角
分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态框下事件的处理方法是不同的
此处模态框是用bootstrap实现的,页面代码为:
<div class="modal fade" id="moveStockToBrandModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
@await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = "Move to Brand?" })
<div class="modal-body">
<div class="row" style="padding-top:8px">
<div class="col col-xs-12"><label>Select folder</label></div>
</div>
<div class="row">
<div class="col col-xs-9">
<div class="input-group" id="stockToBrandSelectInputGroup">
<select id="stockToBrandFolderSelectCombobox" name="Folder" selected="false" hasDownArrow="false" data-options="prompt:'Search folders...'" style="width:100%; height:34px"></select>
</div>
</div>
<div class="col col-xs-3" style="padding-left:5px;"><input type="button" id="btnMoveStockToBrandFolder" class="btn btn-primary" value="Move" style="width:114px;" disabled /></div>
</div> </div>
</div>
</div>
</div>
js代码为:
$('#btnMoveStockToBrand').click(function () {
if (userIsBrandAdmin) {
$.ajax({
url: '/Collections/GetBrandFolders',
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (result) {
$('#stockToBrandFolderSelectCombobox').combobox({
valueField: 'id',
textField: 'name',
data: result.data,
onSelect: function (event, ui) {
$("#btnMoveStockToBrandFolder").removeAttr('disabled');
},
onUnselect: function (event, ui) {
$("#btnMoveStockToBrandFolder").attr('disabled', 'disabled');
}
});
}
}); $('#moveStockToBrandModal').modal();
} });
解决这个问题需要使用bootstrap modal中的事件处理:show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal,
修改后的代码为:
$('#btnMoveStockToBrand').click(function () {
if (userIsBrandAdmin) {
$.ajax({
url: '/Collections/GetBrandFolders',
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (result) {
$('#stockToBrandFolderSelectCombobox').combobox({
valueField: 'id',
textField: 'name',
data: result.data,
onSelect: function (event, ui) {
$("#btnMoveStockToBrandFolder").removeAttr('disabled');
},
onUnselect: function (event, ui) {
$("#btnMoveStockToBrandFolder").attr('disabled', 'disabled');
}
});
}
}); $('#moveStockToBrandModal').modal(); $('#moveStockToBrandModal').on('shown.bs.modal', function () {
$('#stockToBrandSelectInputGroup').bind('input propertychange', function () {
$('.panel.combo-p.panel-htop').show();
});
}).on('hide.bs.modal', function () {
$('.panel.combo-p.panel-htop').hide();
}).on('hidden.bs.modal', function () {
$('.panel.combo-p.panel-htop').hide();
})
} });
Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上的更多相关文章
- 下拉框改变事件:获取下拉框中当前选择的文本 SelectionChanged事件
/// <summary> /// 下拉框改变事件:获取下拉框中当前选择的文本 /// </summary> /// <param name="sender&q ...
- 记录几个爬取动态网页时的问题(下拉框,旧的元素无法获取,获取的源代码和f12看到的不一致,爬取延迟)
更新.....这个动态网页其实直接抓取ajax请求就可以了,很简单,我之前想复杂了,虽然也实现了,但是效率极低,不过没关系,就当作是对Selenium的一次学习吧 1.最近在爬取一个动态网页,其中为了 ...
- c# wpf ComboBox 动态下拉框 及 动态默认值设定
1.下拉框声明 <ComboBox x:Name="DirComboBox" Width="150" Height="18" Marg ...
- EasyUI combobox实现下拉框多选遇坑记录
场景一: 多选正常从第二个选项增加逗号,我选第一个的时候就冒出一个逗号 解决方案一: 这是因为当前的下拉框的值可能为undefined,需要手动清空一下 $("#id").comb ...
- 在easyui中如何修改combobox的下拉框的高度为自适应高度
在easyui中,有时候easyui下拉框的高度比较高,如果我们的值比较少,而下拉框的高度很高的话看起来不好看,修改前效果如下所示: 要修改下拉框的高度和我们的值自适应的 话,只要添加一个panelH ...
- LayUI中实现上级下拉框动态加载下级下拉框js
js代码: var form = layui.form, layer = layui.layer; form.on("select(上级)", function(data){ va ...
- input 下拉框 的实践
有一个需求 需要做一个input 框 点击出现列表 于是想到了 datalist控件 <input type="text" list="itemlist&qu ...
- jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
- combobox的下拉框高度怎样设计合理
orry,代码如下$.extend($.fn.combobox.methods, { autoHeight : function (jq) {//combobox扩展,自动调整高度 ...
随机推荐
- Google I/O 官方应用中的动效设计
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...
- 【原创 深度学习与TensorFlow 动手实践系列 - 1】第一课:深度学习总体介绍
最近一直在研究机器学习,看过两本机器学习的书,然后又看到深度学习,对深度学习产生了浓厚的兴趣,希望短时间内可以做到深度学习的入门和实践,因此写一个深度学习系列吧,通过实践来掌握<深度学习> ...
- Python之turtle画同心圆和棋盘
画饼图 import turtle t = turtle.Pen() for i in range(5): t.penup() t.goto(0, -i*30) t.pendown() t.circl ...
- [转]Emmet使用详解
Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,而且作为一款插件能 ...
- 【C#】读取Excel中嵌套的Json对象,Json带斜杠的问题(其一)
策划填Excel表时,约定对于复杂类型的数据采用Json的格式填写.如下图,D列的内容是Json数据. 单元格中的Json如下. { "name": "BeJson2&q ...
- DTD约束简介
DTD约束简介 文档类型声明 文档类型声明就是DOCTYPE,它告诉解析器,XML文档必须遵循DTD定义.同时,他也告诉解析器,到哪里找到文档定义的其余内容.在前边的例子里DOCTYPE很简单: &l ...
- CentOS7安装Java还是无法使用javac
centos7.4 安装java之后,还是无法使用javac命令.报错提示: [root@ip---- centos]# javac bash: javac: command not found 解决 ...
- [3]java1.8线程池—ThreadPoolExecutor
Wiki 上是这样解释的:Thread Pool 作用:利用线程池可以大大减少在创建和销毁线程上所花的时间以及系统资源的开销! 下面主要讲下线程池中最重要的一个类 ThreadPoolExecutor ...
- 删除JS 对象属性(元素)
var a={"id":1,"name":"danlis"}; //添加属性 a.age=18; console.log(a); //结果: ...
- 【html5】 解决 video标签 不自动全屏
<video controls="controls" poster='' src='' preload="auto" x5-playsinline=&qu ...