Javascript 如何使项目浮动在Jquery对话框之外

我想要一个类似这样的对话框：

    <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>

    <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>

我认为这种方法会奏效，但我想我错了：

    <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>

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(); }
});

    <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

  /*
  * Overrides hidden overflow
  */
 .OverwriteDialogOverflow
 {
     overflow: visible;
 } 

    <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>

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>

    <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>

接近

当我试图将箭头或“关闭”按钮从对话框中移出时，会被切断，并且不可见。我认为添加

.OverwriteDialogOverflow

可以解决这个问题

    <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>

---

建议？

如果/当您更新帖子时，我会对其进行更详细的编辑，但我要做的是将对话框和按钮放在具有相对定位的容器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>
</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>

---

编辑：根据注释添加了.ui对话框CSS

，以便关闭按钮移到外部。我已经编写了此代码

    <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>

                $(".ui-dialog-titlebar-close").css('background-image', 'url(../../images/closePopUpX.png)');
                $(".ui-dialog-titlebar-close").css('width','25');
                $(".ui-dialog-titlebar-close").css('height','25');
                $(".ui-dialog-titlebar-close").css('top','-7px');
                $(".ui-dialog-titlebar-close").css('right','-15px');
                $(".ui-dialog-titlebar-close").css('background-repeat','no-repeat');
                $(".ui-dialog-titlebar-close").css('background-position','center center');
                $(".ui-dialog").css('overflow','visible');
                $('.ui-icon').css('display','none');

---

在对话框的“创建”部分

您可以在打开：函数调用中添加自定义内联CSS和类

    <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>

    $('#splash_screen_dialog').dialog({
        open: function(event, ui) {
            $(this).css({
                'max-height': 500,
                'overflow-y': 'auto'
            }).addClass('dialog-overflow');
        }
    });

---

你有一个我们可以看的例子吗？我试着让它工作，但我从来没有用jquery做任何事情。如果可以显示该对话框，则可以看到关闭按钮位于对话框外部（没有显示。按钮上的

relative

定位是否会导致我的问题？这可能是我定位它们的方式。我想这取决于其他CSS，尤其是对话框和覆盖。你的网站上有没有我可以查看的实例？使用

position:absolute

可以设置相对于附近的位置est非静态祖先。在本例中，将容器

div

设置为

position:relative

意味着您可以设置按钮相对于该容器的位置。我尝试使用

绝对

定位，但不起作用。让我想想如何更好地使用此JSFIDLE。这样可以更容易地查看我的pr问题是我必须这样做：

.ui对话框{overflow:visible；}

。将其添加到编辑中，我将接受它