我尝试在我的网站上使用使用 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”。
最佳答案
用 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;
。
关于javascript - 我的模态背景没有改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20967771/