I try to add a popup on my tumblr, but I think it doesn't work.
Just take a look : http://blog.appyourself.com/
Click on the red banner you can see the page become black, but actually I want something like this to happen : https://i.sstatic.net/vfSmq.png
I simply have this code for the popup
<div class="modal hide" id="infos" style="z-index:99999;">
<div class="modal-body">
<!-- http://cms-v2.local/fra/users/register?source=extern" class="popup" frameborder="0"> -->
<iframe src="http://cms-v2.local/fra/users/login?source=extern" class="popup" frameborder="0">
</iframe>
</div>
and for the link it's this :
<a data-toggle="modal" href="#infos"><img src="http://static.tumblr.com/dbi5jhw/WUkmytiof/banni__re-blog.gif"></a>
for JS and CSS
<script type="text/javascript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<style>
.modal{
height:650px;
width:950px;
}
.modal-body{
height:650px;
width:950px;
padding:0;
margin:0;
max-height:2000px;
}
.popup{
height:650px;
width:950px;
padding:0;
margin:0;
}
</style>
in your website you have double declaration for a .modal
one have width: 950px;
second have width:560px
and you have conflict. You must remove width:950px;
and will be ok.