我想要一个看起来像这样的对话框:
我认为这种方法可行,但我想我错了:
JavaScript
//Creates The Dialog
$('.ImageDialogDiv').dialog({
position: [98, 223],
resizable: false,
//modal: true, /* UNCOMMENT AFTER DEBUGGING */
closeOnEscape: false,
class: 'OverwriteDialogOverflow',
title: $('#hiddenDialogElements').html(),
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
CSS
/*
* Overrides hidden overflow
*/
.OverwriteDialogOverflow
{
overflow: visible;
}
HTML
<div id = "dialogDiv" class = "ImageDialogDiv"></div>
<div id = "hiddenDialogElements">
<button id = "hiddencloseButton">Close</button>
<div id = "hiddenArrowButtons">
<button class = "ArrowButtonDialogLeft" onclick = "ShowNextImage(-1)" ></button>
<button class = "ArrowButtonDialogRight" onclick = "ShowNextImage(1)" ></button>
</div>
</div>
当我尝试将箭头或关闭按钮移出对话框时,就会被切断并且不可见。我想添加.OverwriteDialogOverflow
会解决这个问题的。
建议?
如果/当您更新帖子时,我将对此进行更详细的编辑,但我要做的是将对话框和按钮放在具有相对定位的容器 div 中,并使用绝对定位来放置按钮。像下面这样的东西...
HTML:
<div id = "hiddenDialogElements">
<button id = "hiddencloseButton">Close</button>
<div id = "hiddenArrowButtons">
<button class = "ArrowButtonDialogLeft" onclick = "ShowNextImage(-1)" ></button>
<button class = "ArrowButtonDialogRight" onclick = "ShowNextImage(1)" ></button>
</div>
</div>
</div>
CSS:
.OverwriteDialogOverflow { overflow: visible; }
#dialogContainer { position: relative; }
#hiddencloseButton {
position: absolute;
top: -15px;
right: -15px;
}
#hiddenArrowButtons {
position: absolute;
bottom: -30px;
}
.ui-dialog { overflow: visible; }
Edit:根据评论添加了 .ui-dialog CSS
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)