javascript - 我的模态背景没有改变

Question

我尝试在我的网站上使用使用 Iframe 的模式进行连接/题词

HTML :

<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 并单击红色按钮“connexion”。

Answer 1

用 blanket 类创建一个空的 div。

给.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();
};

这只是粗略的，您需要找出最适合您的方法。

此外，如果您获得适合登录的高度和宽度是最好的，因为它有可怕的滚动条，或者在 .modal 上使用 overflow:hidden;。