jQueryUI模式对话框不显示closuresbutton(x)

我在我的ASP .NET MVC 3应用程序中使用jQuery模式对话框。 它工作正常,除了没有closuresbutton显示在右上angular。 我怎样才能添加这个?

$("#dialog-modal").dialog({ modal: true, autoOpen: false, buttons: { Ok: function () { $(this).dialog("close"); } } }); 

15 Solutions collect form web for “jQueryUI模式对话框不显示closuresbutton(x)”

在对话框的右上angular,将鼠标hover在button所在的位置,看看是不是有一些效果(buttonhover)。 尝试点击它,看看它是否closures。 如果确实closures,那么你只是错过了你的软件包下载的图像精灵。

另一种可能是你有bootstrap库。 某些bootstrap和jquery-ui版本与.button()方法有冲突,如果你的bootstrap.js放在jquery-ui.js之后,那么引导.button()会覆盖你的jquerybutton和jquery-ui'X那么形象就不会显现出来。

看到这里: https : //github.com/twbs/bootstrap/issues/6094

这工作(closures框可见):

 <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 

这导致了这个问题:

 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 

我有这个问题,并能够解决它与下面的声明。

 $.fn.bootstrapBtn = $.fn.button.noConflict(); 

纯CSS解决方法:

我同时使用bootstrap和jQuery UI,改变添加脚本的顺序打破了一些其他的对象。 我结束了使用纯CSS的解决方法:

 .ui-dialog-titlebar-close { background: url("http://code.jquery.com/ui/1.10.3/themes/smoothnesshttp://img.dovov.comui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); border: medium none; } .ui-dialog-titlebar-close:hover { background: url("http://code.jquery.com/ui/1.10.3/themes/smoothnesshttp://img.dovov.comui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0); } 

虽然该操作没有明确说明他们正在使用jquery ui和bootstrap在一起,如果你这样做会发生同样的问题。 你可以通过在jquery ui(js)之前加载bootstrap(js)来解决这个问题。 但是,这会导致button状态颜色的问题。

最终的解决scheme是使用引导或jQuery的UI,但不是两个。 但是,一个解决方法是:

  $('<div>dialog content</div>').dialog({ title: 'Title', open: function(){ var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>'); } }); 

使用user2620505的原理得到了addClass实现的结果:

 ... open: function(){ $('.ui-dialog-titlebar-close').addClass('ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only'); $('.ui-dialog-titlebar-close').append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>'); }, ... 

如果英文不好原谅我,我正在使用Google翻译。

我认为问题是浏览器无法加载包含X图标的jQueryUI图像精灵。 请使用Fiddler,Firebug或其他可以让您访问浏览器向服务器发出的HTTP请求,并validation图像精灵已成功加载的其他程序。

只需检查jquery-ui.css中的closuresbutton图像path:

 .ui-icon { width: 16px; height: 16px; background-image: url**(../img/ui-icons_222222_256x240.png)**/*{iconsContent}*/; } .ui-widget-content .ui-icon { background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsContent}*/; } .ui-widget-header .ui-icon { background-image: url(../img/ui-icons_222222_256x240.png)/*{iconsHeader}*/; } .ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsHover}*/; } .ui-state-active .ui-icon { background-image: url(../img/ui-icons_454545_256x240.png)/*{iconsActive}*/; } 

修正icons_222222_256x240.pngui-icons_454545_256x240.png的path

我有同样的问题只是将这个function添加到打开的对话框选项,它的工作sharm

 open: function(){ var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>'); }, 

并在密切的事件你需要删除

 close: function () { var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.html('');} 

完整的例子

 <div id="deleteDialog" title="Confirm Delete"> Can you confirm you want to delete this event? </div> $("#deleteDialog").dialog({ width: 400, height: 200, modal: true, open: function () { var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.append('<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>'); }, close: function () { var closeBtn = $('.ui-dialog-titlebar-close'); closeBtn.html(''); }, buttons: { "Confirm": function () { calendar.fullCalendar('removeEvents', event._id); $(this).dialog("close"); }, "Cancel": function () { $(this).dialog("close"); } } }); $("#dialog").dialog("open"); 

我想你的代码与其他JS库存在一些冲突。 试着强制显示closuresbutton:

 ... open:function () { $(".ui-dialog-titlebar-close").show(); } ... 

这对我有效。

这里是伟大的答案https://stackoverflow.com/a/31045175/3778527我与testing&#xFF1A;

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/blitzer/jquery-ui.css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 

只需链接CSS为我工作。 它可能已经完全从我的项目中缺失:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

你需要在“确定”周围添加引号。 这是button的文字。 实际上,button的文本当前是空的(因此不显示),因为它试图parsing该variables的值。

除了按下[ok]或[cancel]button之外,模式对话框并不意味着被closures。 如果你想在右手边的[x],设置模态:假或者完全删除它。

一个解决scheme可以有你的模式内closures

看看这个简单的例子

我有一个类似的问题。 我正在使用jquery和jquery-ui。 当我升级我的版本,closures对话框图像不再出现。 我的问题是,当我解压我下载的js包时,目录没有执行权限。

所以一个快速的chmod + x dir-name,以及子文件夹,都能做到这一点。 没有Linux上的执行权限,Apache无法进入该文件夹。

  • jquery:如何完全删除closures对话框
  • jQuery UI可sorting,如何确定更新事件中的当前位置和新位置?
  • 把datepicker()放在dynamic创build的元素上--JQuery / JQueryUI
  • 使用JQuery和Jquery-svg拖动SVG
  • jQuery UI对话框 - 缺lessclosures图标
  • Jquery-UI对话框 - 在没有DIV的情况下
  • 将数据传递给jQuery UI对话框
  • jQuery图表
  • Ruby on Rails 3.1和jQuery UI图像
  • 如何使用jquery从string数组中生成UL Li列表?
  • jQuery UI可以用表格和tr的宽度sorting