Question

我正在尝试使用JS控制模态页面上的视频播放。但它效果不好。真的需要帮助。

它假设是Modal页面下的背景（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>

Answer 1

这很简单，你要添加

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

到`你需要把它改成

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

因为你的html中的id是额外的

这是一个jsfiddle link

Answer 2

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

js中的以下行$("div#ex").addClass("haha");必须是

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

或

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

我希望这只是一个错字。无论如何，ID由#和class代表.

模态背景

2 个答案: