Search code examples
htmltwitter-bootstraptumblr

Bootstrap popup doesn't open


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 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>

Solution

  • 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.