Модальный фон

Question

Модальный фон

0

Я пытаюсь использовать 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>

user3633240 13 май 2014, в 17:54

Источник

0

В вашем коде есть опечатка $ ("div # ex"). AddClass ("haha"); это должно быть $ ("div # extra"). addClass ("haha");
mohamedrias 13 май 2014, в 16:36

Теги:

javascript

jquery

html5

css3

video

2 ответа

Ещё вопросы

В вашем коде есть опечатка $ ("div # ex"). AddClass ("haha"); это должно быть $ ("div # extra"). addClass ("haha");

nolawi petros · Answer 1 · 2014-05-13T15-27-00.000Z

это просто, что вы добавляете

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

"вам нужно изменить его на

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

потому что id добавлен в ваш html не ex

здесь ссылка jsfiddle

mohamedrias · Answer 2 · 2014-05-13T13-46-00.000Z

Согласно вашему html <div id="extra" class="ex">

Следующая строка $("div#ex").addClass("haha"); в вашем js нужно быть либо

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

или

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

Надеюсь, это просто опечатка. в любом случае ID представлен # и class .