視頻在彈出框中

我想，當用戶點擊這樣的鏈接嵌入一個彈出框內部的YouTube代碼：但是另一個用戶正對Firefox的一個問題，當視頻是視頻在彈出框中

enter image description here

甚至沒有嵌入在彈出：

enter image description here

用戶是有Firefox中的問題，但是，當我在Firefox的一切測試也沒關係。

在Firefox的設置中有什麼，他有，我不？

下面是代碼：

<!DOCTYPE html> 
<head> 
    <title>Creating a modal window with HTML5 &amp; CSS3</title> 

    <style> 
    .modalDialog { 
     position: fixed; 
     font-family: Arial, Helvetica, sans-serif; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,0.8); 
     z-index: 99999; 
     opacity:0; 
     -webkit-transition: opacity 400ms ease-in; 
     -moz-transition: opacity 400ms ease-in; 
     transition: opacity 400ms ease-in; 
     pointer-events: none; 
    } 

    .modalDialog:target { 
     opacity:1; 
     pointer-events: auto; 
    } 

    .modalDialog > div { 
     width: 560px; 
     position: relative; 
     margin: 10% auto; 
     padding: 5px 20px 13px 20px; 
     border-radius: 10px; 
     background: #fff; 
     background: -moz-linear-gradient(#fff, #999); 
     background: -webkit-linear-gradient(#fff, #999); 
     background: -o-linear-gradient(#fff, #999); 
    } 

    .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; } 
    h2 
    { 
     text-align:center; 
    } 
    </style> 
</head> 

<body> 

<a href="#openModal">Open Modal</a> 

<div id="openModal" class="modalDialog"> 
    <div> 
     <a href="#close" title="Close" class="close">X</a> 
     <h2>Youtube Video</h2> 
     <iframe width="560" height="315" src="http://www.youtube.com/embed/98H2x9BjUxE?rel=0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

</body>

來源

2014-02-12 Abdullah Shafique

我已經做了的jsfiddle解決這個http://jsfiddle.net/sMpcL/1/

我已經添加了以下內容： -

.modalDialog { display: none; } 
.modalDialog:target { display: block; }

它的工作對我來說在Chrome和Firefox

來源

2014-02-12 14:54:12 Ben

沒有這兩行，它在Firefox上適合你嗎？ –

你知道它爲什麼對我有用，但不是用戶？ –

這個問題出現在Firefox 17中。 –

視頻在彈出框中

回答

相關問題