背景我的模式不改變

我嘗試使用使用的iframe的Connexion /題字一個模式在我的網站背景我的模式不改變

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

My mod人出現，你可以在這裏看到：http://i.imgur.com/eoURTYP.png

但我想我的模式之外的背景變得褪色或灰色和我真的不知道如何去改變它

順便說的其他問題我怎麼能告訴我的模式，當我點擊我的模態之外的模態關閉，因爲我認爲這是本機

如果你想自己嘗試只是去dev.appyourself.com並點擊紅色按鈕「connexion」。

來源

2014-01-07 Alexandre Schmitz

您需要創建一個容器，是100％的寬度內的模態/ windows瀏覽器的高度。添加不透明度+隱藏/顯示模式 – Romain

創建一個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上。

來源

2014-01-07 09:24:08 Albzi

完美謝謝！ –

@AlexandreSchmitz如果你使用'position：fixed'而不是'position：absolute'，可能會更好一些，但這取決於你:) – Albzi

使用像這樣的引導程序$（'＃ays-popin-connexion'）。modal ）;會起作用嗎？ –

在這裏我修改後的代碼，它可以幫助你。

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

來源

2014-01-07 09:30:10

背景我的模式不改變

回答

相關問題