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

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

此外，最好是为登录设置正确的高度和宽度，因为它有可怕的滚动条，或者在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();
   });
}

我的模态的背景不会改变

2 个答案: