CSS燈箱問題

-1

我爲播放YouTube視頻創建了一個小燈箱。它工作正常，但它的設計很糟糕。檢查出來。 enter image description here CSS燈箱問題

我試圖解決它，但這是我得到的最好結果。您可以觀察燈箱的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; }

來源

2013-12-16 Diego

你在問我們做什麼？好的設計對每個人都是不同的...... – c0d3Junk13

我想知道如何讓X的close完全出現在對話框中。 – Diego

好吧，它看起來像你必須玩在CSS中的正確和最高值...不知道你的CSS的其餘部分，很難說。嘗試-22px的權利和-20px的頂部，看看是否移動'X'按鈕 – c0d3Junk13

您需要刪除從overflow: hidden;，

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

的overflow導致按鈕只顯示什麼是父母的內部可見。

來源

2013-12-16 20:28:37

謝謝。仍然想知道爲什麼是-1問題。 – Diego

沒問題，我敢肯定有人可能脾氣暴躁，或者他們覺得答案很明顯。我可以看到他們爲什麼低估了我猜，因爲'溢出'是一種常見的CSS風格，但誰知道。無論如何，您的設計中最好的運氣。 –

不知道這是你在想什麼，但我的建議，整理，這將是：

更改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',

不知道這是你想要的，但我會從這開始清理你的最終結果。希望它有幫助。

丹

來源

2013-12-16 20:29:48 PartTimeNinja

回答

相關問題