CSS灯箱的问题

Question

我创建了一个用于播放YouTube视频的小灯箱。 它工作正常，但设计很糟糕。 看看这个。

我试图解决它，但这是我得到的最好结果。 JSbin的链接，您可以在其中观察灯箱。 http://jsbin.com/UDIGeveg/1/edit

这是我的CSS。 不太确定，我还能做什么，所以关闭的X在对话框中显得很好。

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

Answer 1

您需要删除overflow: hidden;，

div#openMContainter { 
    width: 600px; 
    height: auto;
    display:block; 
}

overflow导致该按钮仅显示父母内部可见的内容。

Answer 2

不确定这是否是您的想法，但我建议整理这个：

将css更改为：

// Uniform padding around the screen, keeps the grey area constant
.modalDialog > div {
    padding: 20px 20px 20px 20px;
}

//Moving the x 'close button'
//Amend the padding that determines the button position 
.close {
top: 2px;
right: 2px;
}

然后在java：

// amend the width of the screen so that it fits into the grey area
width: '600',

不确定这是否是您想要的但我会从此开始整理您的最终结果。 希望它有所帮助。

丹