如何使项目浮出Jquery对话框 [英] How to make items float outside of Jquery Dialogs

问题描述

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

我认为这种方法会工作，但我想我错了：

JavaScript

  //创建对话框
 $（'。ImageDialogDiv '）.dialog（{
 position：[98,223]，
 resizable：false，
 // modal：true，/ * UNCOMMENT DETERGGING * / 
 closeOnEscape：false ，
 class：'OverwriteDialogOverflow'，
 title：$（'＃hiddenDialogElements'）。html（），
 open：function（event，ui）{$（。ui-dialog- titlebar-close）。hide（）;} 
}）; 
  

CSS

  / * 
 *覆盖隐藏的溢出
 * / 
 .OverwriteDialogOverflow 
 {
 overflow：visible; 
} 
  

HTML

 < div id =dialogDivclass =ImageDialogDiv>< / div> 
 
< div id =hiddenDialogElements> 
< button id =hiddencloseButton>关闭< / button> 
< div id =hiddenArrowButtons> 
< button class =ArrowButtonDialogLeftonclick =ShowNextImage（-1）>< / button> 
< button class =ArrowButtonDialogRightonclick =ShowNextImage（1）>< / button> 
< / div> 
< / div> 
  

当我尝试移动箭头或关闭按钮关闭对话框，不可见。我虽然添加 .OverwriteDialogOverflow 会照顾。

建议？

解决方案

如果/当你更新帖子，但我会做的是把对话框和按钮在一个容器div相对定位，并使用绝对定位放置按钮。像下面的内容...

HTML：

 code>< div id =hiddenDialogElements> 
< button id =hiddencloseButton>关闭< / button> 
< div id =hiddenArrowButtons> 
< button class =ArrowButtonDialogLeftonclick =ShowNextImage（-1）>< / button> 
< button class =ArrowButtonDialogRightonclick =ShowNextImage（1）>< / button> 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> .OverwriteDialogOverflow {overflow：visible; } 
 
 #dialogContainer {position：relative; } 
 
 #hiddencloseButton {
 position：absolute; 
 top：-15px; 
 right：-15px; 
} 
 
 #hiddenArrowButtons {
 position：absolute; 
 bottom：-30px; 
} 
 
 .ui-dialog {overflow：visible; } 
  

编辑 p>

I want to have a dialog that looks kinda like this:

I thought this approach would work but I guess I was wrong:

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>

When I attempt to move the arrows or close button off of the dialog, then get cut off and will not be visible. I though that adding .OverwriteDialogOverflow would take care of that.

Suggestions?

解决方案

I'll edit this with more detail if/when you update the post, but what I would do is put the dialog and buttons in a container div with relative positioning, and use absolute positioning to place the buttons. Something like below...

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: added .ui-dialog CSS as per comment

这篇关于如何使项目浮出Jquery对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！