jQuery UI 自定义theme中对话框close icon错位的解决

最新推荐文章于 2020-12-30 20:57:32 发布
最新推荐文章于 2020-12-30 20:57:32 发布
阅读量1k 收藏
点赞数
分类专栏： css jQuery UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leelyliu/article/details/17606663
版权

运行环境：

Chrome：31.0.1650.63 

jQuery ui 1.9.2


最近折腾jQuery UI 以及theme。在官网上下载了cupertino theme，使用时发现dialog的close icon跑偏了。如下图



换回到base theme，close icon是正常的。很明显是cupertino的css出了问题。通过Chrome的“元素审查（Element Inspect）”发现引入的jquery-ui-1.9.2.custom.min.css中定义了这么句话：


去掉上图红框部分的定义，刷新页面，dialog正常了得意：


leelyliu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery UI库中dialog对话框功能使用全解析
10-22
jQuery UI是一个基于jQuery...总结来说，jQuery UI的dialog功能为开发者提供了一个强大的工具，用于创建功能丰富、样式自定义、用户体验良好的交互式对话框。通过合理配置不同的选项，可以轻松实现复杂的用户界面需求。
jQueryUI如何自定义组件实现代码
10-28
在Web开发中，jQueryUI是一个用于增强界面交互体验的JavaScript库，其核心是UI Widget（小部件）的概念。自定义jQueryUI组件是一个非常重要的功能，它能够让我们创建具有特定行为和样式的新组件，使得代码更加模块化...
隐藏JQuery Dialog的Close Icon
zeromike
08-14 279
隐藏JQuery对话框的关闭图标。有时候我希望用户不能通过JQuery Dialog提供的X按钮关闭对话框，也不希望用户通过ESC键关闭，总的一句就是除非通过我提供的按钮，否则不能关闭该对话框。通过禁用JS之类的方式不在考虑的范围。代码如下： $("#div1").dialog({ closeOnEscape: false, open: function(event, ui) ...
jquery dialog close icon missing 关闭图片丢失，样式丢失问题
aiyigeng5987的博客
09-30 187
http://stackoverflow.com/questions/17367736/jquery-ui-dialog-missing-close-icon 转载于:https://www.cnblogs.com/MSIKRUBY/p/4849135.html
Close icon
BLOG域名:programb.blog.csdn.net
04-15 215
Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label. ×
让你的thickbox的modal也拥有关闭图标
weixin_34099526的博客
05-24 69
Thickbox是一款很不错的jquery弹出层的插件.关于他的细节用法,可以参考他的官方说明。最近一直在用这个插件，发现他的一个modal模式没有右上侧的关闭按钮。于是我就随便弄了一个，有点卖巧。 效果图如下：         这样就可以点击关闭图标关闭modal窗口。 详细代码如下：   代码 <div id="login" style="text-ali...
用JQuery 实现的自定义对话框
01-19
为了得到更丰富的自定义对话框功能，于是用JQuery编写了一个对话框插件；只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。 插件功能特点: 允许通过CSS进行外观控制。 可以任意把面页的元素作为对话框...
jQuery UI自定义样式日历特效代码
03-20
在"jQuery UI自定义样式日历特效代码"这个项目中，开发者可以创建具有个性化样式的日历插件，以满足特定的设计需求。 jQuery UI的Datepicker组件是一个常用的日期选择器，它可以方便地添加到任何输入字段中，允许...
ui-dialog-titlebar-close 按钮存在 图标不显示
潘晓宇(panxiaoyu)的专栏
03-16 2518
The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in. Literally, swap the two so that instead of: src="http://code.jquery.com/ui/1.10.3/jquery
CAS单点登录10- CAS认证中心theme异常解决办法
bitree1的博客
02-14 1873
错误信息为： JspTagException: Theme 'theme': No message found under code 'standard.custom.css.file' for locale 'en_zh_CN' 解决办法： 将“cas-server-webapp\src\main\webapp\WEB-INF\classes”目录下的“cas-theme- default...
Android 系统状态栏沉浸式/透明化完整解决方案
狂奔的奶牛
06-01 3166
前言 沉浸式全屏模式 隐藏status bar（状态栏）使屏幕全屏，让Activity接收所有的（整个屏幕的）触摸事件。透明化系统状态栏 透明化系统状态栏，使得布局侵入系统栏的后面，必须启用fitsSystemWindows属性来调整布局才不至于被系统栏覆盖。 因此,我就这样理解了: 沉浸式不就是隐藏状态栏嘛,状态栏不见了?这不就是app全屏模式嘛?wtf? 而透明式式状态
JSP中JQuery UI Dialog弹窗使用具体操作
can8888的博客
06-15 2483
本文简单介绍了JQuery-UI-Dialog弹窗的使用方法。
vue-element-admin项目打包后，生产环境再chrome浏览器下偶尔存在element-ui中的icon乱码
顺拐小乌龟的博客
12-30 4272
vue-element-admin项目打包后，生产环境再chrome浏览器下偶尔存在element-ui中的icon乱码 在将vue-element-admin或者vue-element-template打包发布到生产环境后，在chrome浏览器中刷新时，偶尔存在element-ui的icon出现乱码。F12查看乱码的icon元素，发现.el-icon-close:before { content: "□"}，同时html界面通过link标签引入的css文件都未被浏览器正常加载。非乱码情况下，icon元素也
CAS认证中心theme异常解决办法
weixin_33775572的博客
12-09 217
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 自定义modal 模态框组件
weixin_30871905的博客
09-18 1470
参数名 类型 说明 visible Boolean 是否显示，默认false title String 标题 update:visible Boolean 更新visible, 使用:visible.sync实现动态绑定 Modal.vue <template...
jqueryui icons图标说明
kevin
06-29 9027
http://i.80tvb.com/jqueryui-icons-list/ 在使用jQueryUI的button时真心感叹这东使用起来是多方便的，这里把jQueryUI默认样式里的Icons图标列了出来，以方便需要时查阅。 ui-icon-carat-1-n   ui-icon-carat-1-ne   ui-icon-carat-1
隐藏jQuery Dialog的关闭图标
醉ぃ灬清风。
06-22 2279
$("#div1").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); } });
通过微信分享链接，后面被加上from=singlemessage&isappinstalled=1导致网页打不开
热门推荐
haozi3156666的专栏
06-19 2万+
朋友圈   from=timeline&isappinstalled=0 微信群   from=groupmessage&isappinstalled=0 好友分享 from=singlemessage&isappinstalled=0 在连接后加上?&再进行分享，分享成功，原理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值