I have integrated a modal using Iframe for user login/registration on my website.
Here is the HTML code:
<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>
And this is the CSS styling:
.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;
}
For the JavaScript functionality, here's what I have implemented:
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);
}
});
}
If you want to see how the modal looks, you can check it out here: https://i.stack.imgur.com/4qwQ0.png
However, I am facing an issue where I want the background outside of my modal to fade or turn grey but I'm not sure how to achieve this effect.
Also, I would like to know how to make the modal close when clicked outside of it, as I assumed this was a native feature.
If you want to experiment with it yourself, simply visit dev.appyourself.com and click on the red button labeled "connexion".