如何将关闭按钮放在jquery的标题栏中弹出

时间:2017-05-27 15:07:05

标签: javascript jquery html css

这是小提琴 https://jsfiddle.net/evbvrkan/

这是一个非常大的项目,所以不能改变很多东西,现在要求的是把第二个弹出的x按钮(来自点击'点击我2'按钮)在标题栏中或任何其他方式使第二个对话框显示以关闭它。

正如您在CSS中看到的,每个弹出窗口标题关闭图标都被禁用,我无法改变它。

我尝试了stackoverflow的许多解决方案,没有任何效果,在对话框或X标志的标题栏中放置一个按钮

HTML

<div id="myFirstDialog">
    This is the content of my modal dialog box

</div>

<button id="clickMe">Click Me</button>

<div id="my2ndDialog" >
    This is the content of my 2nd modal dialog box

</div>

<button id="clickMe2">Click Me 2</button>

JS

$("#myFirstDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box"
   });

$('#clickMe').click(function() {
    $("#myFirstDialog").dialog("open");
});

$("#my2ndDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box",
    buttons   : {
              'X' : function() {
                  $(this).dialog('close');
              }  
              }
   });

   $('#clickMe2').click(function() {
    $("#my2ndDialog").dialog("open");
});

CSS

.ui-dialog-titlebar-close {
    visibility:hidden;
}

1 个答案:

答案 0 :(得分:1)

使用dialogClass将类添加到要显示关闭按钮的ui对话框,然后根据该类添加要显示的CSS:

https://jsfiddle.net/jmcjzkyv/