Фон моего модальных не меняет

Question

Я пытаюсь использовать модальный, используя Iframe для связи/надпись на моем веб-сайте

сайтов:

<div class="modal" id="ays-popin-connexion" aria-hidden="true"> 
    <div class="modal-body" aria-hidden="true"> 
     <iframe src="***" id="iframe1" class="popup" frameborder="0" aria-hidden="true"> 
     </iframe> 
    </div> 
</div> 

CSS:

.modal{ 
     height:650px; 
     width:950px; 
     left:30%; 
     top:10%; 
     opacity: 0.8; 
     z-index: 4589365; 
    } 
    .modal-body{ 
     height:650px; 
     width:950px; 
     padding:0; 
     margin:0; 
     max-height:2000px; 
    } 
    .popup{ 
     height:650px; 
     width:950px; 
     padding:0; 
     margin:0; 
    } 

Javascript :

window.onload = function() 
{ 
    $("#ays-menu a").on("click",function(event){ 
      if(this.text == "CONNEXION"); 
      { 
      console.log($(this).attr('href')); 
     $("#ays-popin-connexion").toggle(1500); 
      console.log(this); 
      } 
    }); 
} 

Мой мод аль появляется, как вы можете увидеть здесь: http://i.imgur.com/eoURTYP.png

Но я хочу, чтобы фон за пределами моего модального стать замиранием или серыми и я не имею действительно не знаю, как изменить его

Кстати в другой вопрос, как может я скажите моему модному, что, когда я нажимаю на внешний вид своего модального модального закрытия, потому что я предполагал, что это был родной

Если вы хотите попробовать сами, просто зайдите на dev.appyourself.com и нажмите на красную кнопку «Связь».

Answer 1

Создайте пустой div с классом blanket.

Дайте .blanket этот стиль:

.blanket{ 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:4580000 /*lower than the modal but higher than body*/ 
    background:rgba(0,0,0,0.5); 
    display:none; 
} 

Тогда jquery.

$("#ays-menu a").on("click",function(event){ 
     if(this.text == "CONNEXION"); 
     { 
      $(".blanket").show(); 
      $("#ays-popin-connexion").toggle(1500); 
     } 
}); 

$('.blanket').click(function(){ 
    $('.modal').hide(); 
    $(this).hide(); 
}; 

Это просто грубо, и вам нужно будет решить, что лучше всего подходит для вас.

Кроме того, это лучше, если вы получите высоту и ширину для входа в систему, так как у нее есть ужасные полосы прокрутки, или, альтернативно, используйте overflow:hidden; на .modal.

Answer 2

Здесь мой модифицированный код, который поможет вам.

<div class="modal" id="ays-popin-connexion" aria-hidden="true"> 
     <div class="modal-body" aria-hidden="true"> 
      <iframe src="***" id="iframe1" class="popup" frameborder="0" aria-hidden="true"> 
      </iframe> 
     </div> 
    </div> 

<!-- Add for modal backdrop --> 
    <div class="modal-backdrop" style="display:none;"></div> 

Вот мой CSS для модального-фон

.modal-backdrop { 
position: fixed; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 
z-index: 1030; 
background-color: #000; 
} 

код Javascript здесь: -

window.onload = function() 
{ 
    $("#ays-menu a").on("click",function(event){ 
      if(this.text == "CONNEXION"); 
      { 
      console.log($(this).attr('href')); 
     $("#ays-popin-connexion").toggle(1500); 
     $(".modal-backdrop").show(); 
      console.log(this); 
      } 
    }); 
/************Click outside pop up close the pop up ***********/ 
    $(".modal-backdrop").click(function(){ 
     $("#ays-popin-connexion").hide(); 
    }); 
}