Couldn't show Modal popup

  • Unknown's avatar
    yusufduyar · Member ·

    hi. I want to show a modal popup window on my site in body onload. I tried the codes below on my local and it works. then i added this codes to my wordpress site but it didn’t work. i added these codes script and style blocks between head tags in header.php. How can i show that modal popup please help

    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>Simple Modal Window</title>

    <script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.pack.js”></script>
    <script>

    $(document).ready(function() {
    //Put in the DIV id you want to display
    launchWindow(‘#dialog’);

    //if close button is clicked
    $(‘.window #close’).click(function () {
    $(‘#mask’).hide();
    $(‘.window’).hide();
    });

    //if mask is clicked
    $(‘#mask’).click(function () {
    $(this).hide();
    $(‘.window’).hide();
    });

    });
    function launchWindow(id) {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $(‘#mask’).css({‘width’:maskWidth,’height’:maskHeight});

    //transition effect
    $(‘#mask’).fadeIn(1000);
    $(‘#mask’).fadeTo(“slow”,0.8);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css(‘top’, winH/2-$(id).height());
    $(id).css(‘left’, winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);

    }

    </script>

    <style>
    body {
    font-family:verdana;
    font-size:15px;
    }

    a {color:#333; text-decoration:none}
    a:hover {color:#ccc; text-decoration:none}

    #mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
    }

    #boxes .window {
    position:absolute;
    width:440px;
    height:200px;
    display:none;
    z-index:9999;
    padding:20px;
    }

    #boxes #dialog {
    width:375px;
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }
    }
    </style>
    </head>
    <body>
    <div id=”boxes”>

    <div id=”dialog” class=”window”>
    Simple Modal Window |
    Close it
    </div>

    <!– Mask to cover the whole screen –>
    <div id=”mask”></div>
    </div>

    </body>
    </html>

  • Unknown's avatar
    supportbot · Member ·

    You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

    If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

    If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

    This is an automated message.

  • Unknown's avatar
    yusufduyar · Member ·

    my site is http://www.teleport.com.tr/

  • Unknown's avatar
    thesacredpath · Member ·

    Sorry, you need to head over to http://wordpress.ORG/support/ as that is where self-hosted wordpress blogs using the software from wordpress.ORG are supported.

    These forums are for those hosted here on the wordpress.COM free hosting service and things here work differently.

    If you are not familiar with the differences, see this support document: http://en.support.wordpress.com/com-vs-org/ .

  • The topic ‘Couldn't show Modal popup’ is closed to new replies.