jQuery Ui Dialog 和select2 冲突

最新推荐文章于 2021-08-19 10:20:39 发布

转载最新推荐文章于 2021-08-19 10:20:39 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/OriginLeon/blog/879649

本文介绍了一种解决Select2插件与UI Dialog组件在交互时出现的问题的方法。通过在select2.js文件中添加特定的JavaScript代码，可以确保两者在弹出窗口打开时能够正确工作，避免了因Select2下拉菜单导致UI Dialog无法正常关闭的问题。

解决方案来自世界最大的基友交友中心

将以下代码，插入select2.js中即可。

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

转载于:https://my.oschina.net/OriginLeon/blog/879649

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenxia1902

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

JQuery UI Dialog

01-27

JQuery UI Dialog 是一个功能强大且灵活的对话框组件，它提供了许多有用的属性和方法来帮助开发者快速创建自定义的对话框。在本文中，我们将详细介绍 JQuery UI Dialog 的一些重要属性和方法，并提供实践中常见的...

Jquery UI dialog 详解 (弹出层)

10-21

本文档将详细介绍 Jquery UI Dialog 的各项属性及其用法，并通过实例代码帮助读者更好地理解和掌握这一组件。 #### 二、Jquery UI Dialog 属性详解 ##### 1. `autoOpen` - **说明**：`autoOpen` 属性控制对话框...

参与评论您还未登录，请先登录后发表或查看评论

Select2冲突问题

hoff5230的博客

03-01

2926

Select2应用踩坑一、Select2加载顺序二、$(...).select2() is not a function...原因一、Select2加载顺序 1、jquery.js； 2、select2.js/select2.css 3、my.js(自定义的js) 二、$(…).select2() is not a function…原因 1、select2.js引用失败，通过查看网页源代码，查看是否存在select2.js； 2、引用的其他js中存在全局变量define以及require,与select

select2 控件在jquery-ui dialog下无法搜索问题解决

weixin_34310369的博客

05-28

323

2019独角兽企业重金招聘Python工程师标准>>> ...

Jquery select2 数据返回后，select2样式没有应用上去

weixin_43308653的博客

08-19

602

例如：<select class="editSelect_SeverId" id="editSelect_SeverId" name="select_server_address" data-width="150px" onchange="serverIdChange();"></select> AJAX返回值给上面的下拉框后，样式没出现，修复如下： $.ajax({ type: 'get', url: getServerIpListUrl, ...

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

兰給的博客

09-28

1847

解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

chosen.jquery.min.js select2.js 弊端

weixin_34227447的博客

12-08

216

chosen.jquery.min.js --将select放在页面最下方，会导致页面高度增加，最下方空白多出来 select2.js --点击select 但未选择，然后移出鼠标，发现其他文本框、关闭按钮等等，获取不到焦点，因此点击关闭按钮，不执行关闭操作。转载于:https://www.cnblogs.com/jcz1206/p/4151293.html...

jQuery UI Dialog 使用技巧与示例

通常，我们首先需要在页面上包含 jQuery、jQuery UI 核心库和 Dialog 插件的 CSS 和 JavaScript 文件。一旦这些文件加载完成，我们可以选择一个元素并调用 `.dialog()` 方法将其转换为对话框。例如： ```javascript ...

jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js

09-19

jQuery UI dialog IE6下处理select框被遮挡jquery.bgiframe.js

jQuery UI Dialog核心属性详解：autoOpen, bgiframe, buttons & closeOnEscape

"jQuery UI Dialog 属性详解" 在jQuery UI库中，Dialog功能是创建可定制的对话框组件的强大工具。对话框（Dialog）允许我们在页面上弹出窗口，提供额外的信息或进行交互操作。本文将详细介绍五个关键的Dialog属性：...

jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

11-29

下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题。具体实现方法大家可以参考下本文。方法一： p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭": function() { p1_dialog_seniorSearch.dialog( "close" ); } }, open:functio

前端插件 icheck jquery-select2

NRGAGA的专栏

03-14

326

icheck插件使用 https://blog.youkuaiyun.com/liyixia/article/details/54582096 jquery-select2 https://jeesite.gitee.io/front/jquery-select2/4.0/index.htm

解决 jq ui 弹框 select2 input 失效问题

month_ss_815的博客

10-18

981

// jq dialog 弹框 var diagFn=function(){ $(".ui-widget-overlay").show(); //html页面的div $("#diag-div").dialog({ resizable:false, width: 500, modal: fa...

select2与Bootstrap冲突解决

马凡贺的博客

03-26

8540

需要在bootstrap.css , select2.css 后加入下面的css /*** Select2 Plugin ***/ .form-control .select2-choice { border: 1px solid #e5e5e5; background-color: #fff; background-image: none; filter: none; he

jquery ui dialog 中使用select2 导致select2的input失去焦点的解决方法

u011169725的专栏

04-26

4283

在jqueryUI 的dialog中使用select2，select2的input search无论怎样都获取不到焦点？解决放方法：去掉diaog中的modal: true,便可$("#addAndEditDiv").dialog({ autoOpen: false, width: 1000, height: 600,

解决select2 在easyui dialog中不显示下拉列表的问题

王建野的专栏

01-14

5248

若easyui 的dialog或者window中使用了select2则会出现select2的下拉列表看不见的情况的情况，究其原因是dialog的z-index大于select2的z-index值解决方式如下：加如下3个样式 .panel.window { z-index: 1000 !important; }

SELECT 2 —— 替代SELECT 组件的jQuery 插件