SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question pop ip window from bottom fly out

    Hi there..

    Please look at the below link first

    Link here

    Look after loading the page a pop up window arrived " News lettersubscription box" .

    Any Idea about how to do this?? I need guideline. Please help me..

    Advanced thanks for the help

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there..

    i managed the popup

    link here

    But what i need is ...

    #The popup should appear from bottom to middle. i mean the transition effect should slide out from bottom.
    #After submit form.. a message appear " thanks you".. in another page. but i want to appear it in the middle of pop up modal

    Advance Thanks

    Here is my code....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {

    var id = '#dialog';

    //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()/2);
    $(id).css('left', winW/2-$(id).width()/2);

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


    //if close button is clicked
    $('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
    });


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

    });

    </script>

    <script type="text/javascript">
    $(function(){
    $("form#emailsignup_form").submit(function(e){
    e.preventDefault();
    $.post(
    "processdata.php",
    $(this).serialize(),
    function(data){
    //Your code to process returned data goes here
    $("#boxes").text("Thank you!");
    }
    );
    });
    });

    </script>
    <style type="text/css">
    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;
    }
    .heade {
    background-color: #039;
    }
    #boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:600px;
    height:400px;
    display:none;
    z-index:9999;
    padding:20px;
    }
    #boxes #dialog {
    width:700px;
    height:203px;
    padding:10px;
    background-color:#ffffff;
    }
    </style>
    </head><body>


    <div id="boxes">
    <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
    <div class="heade">Confor class "heade" Goes Here</div>
    <form id="emailsignup_form" method="post" action="">
    <input id="cemail" name="email" size="25" class="required email" />
    <input class="submit" id="submitemail" type="submit" value="Submit"/>

    </form>

    </div>
    <!-- Mask to cover the whole screen -->
    <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •