莫代尔背景

我试图使用JS控制模式页面上的视频播放。但它运作不好。真的需要帮助。莫代尔背景

它假设是模态页（DIV＃EX）下方的背景，但它不工作。

我是一名新手，我很感谢您的帮助。 :-)

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Modal Test</title> 

<script type="text/javascript" src="../jquery-1.11.1.js"> 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#showSimpleModal").click(function() { 
      $("div#simpleModal").addClass("show"); 
      $("div#ex").addClass("haha"); 

      return false; 
     }); 

     $("#closeSimple").click(function() { 
      $("div#simpleModal").removeClass("show"); 
      $("#videoContainer")[0].pause(); 
      return false;     
     }); 
    }); 
</script> 

<style type="text/css"> 



div#ex 
{ 
    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: 98; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 


} 

div#ex.haha 
{ 
    opacity: 1.0; 
    z-index: 99;   
    -webkit-transition-duration: 0.25s; 
} 







div#simpleModal 
{ 
    top: 40px; 
    border: solid 1px #bbb;  
    padding: 20px; 
    -webkit-box-shadow: 0px 6px 12px rgba(0,0,0,0.25); 
    opacity: 0.0; 
    -webkit-transition: opacity 400ms ease-in; z-index: 0; 
    border-radius: 10px; 
    width: 650px; 
    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); 



} 

div#simpleModal.show 
{ 
    opacity: 1.0; 
    z-index: 100;   
    -webkit-transition-duration: 0.25s; 
} 

.close { 
    font-family: Arial, Helvetica, sans-serif; 
    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:#C03; } 
.video {  box-shadow: 1px 1px 3px #000; 
} 
</style> 
</head> 
<body> 

<a href="" id="showSimpleModal">Show Modal</a> 
<div id="extra" class="ex"> 
<div id="simpleModal" class="modalDialog"> 
<video width="640" height="360" src="../New Interview.mov" controls> 
</video> 

<a href="" id="closeSimple" class="close">X</a> 
</div> 
</div> 
</body> 
</html>

来源

2014-05-13 user3633240

。在你的代码$一个错字（“＃DIV恩”）表示addClass（“哈哈”）。它应该是$（“div＃extra”）。addClass（“haha”）; – mohamedrias

这很简单，你要添加

 $("div#ex").addClass("haha");

为`你需要将其更改为

$("div#extra").addClass("haha");

因为ID在你的HTML是不额外恩

这里是一个jsfiddle link

来源

2014-05-13 16:29:36

根据你的HTML <div id="extra" class="ex">

下面一行$("div#ex").addClass("haha");在你的js需要作

$("div#extra").addClass("haha");

或

$("div.ex").addClass("haha");

我希望它只是一个错字。反正ID由#和class通过.

来源

2014-05-13 16:35:31 mohamedrias

回答

相关问题