Solved

jquery popup

Posted on 2011-02-26
2
885 Views
Last Modified: 2012-05-11
Hi,

I have a simple jquery script to make a pop up for sending a message.  However the popup only works after the pages has been sitting there for a while and only stays for a couple of seconds.

I reference the jquery file in the master page as follows:

<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/JQueryStyles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../jquery-1.5.1.js" ></script>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>


Than I have the script in the content page:

<script type="text/javascript">

    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;

    var popupStatus = 0;

    //loading popup with jQuery magic!
    function loadPopup() {
        //loads popup only if it is disabled
        if (popupStatus == 0) {
            $('[id$=backgroundPopup]').css({
                'opacity': '0.7'
            });
            $('[id$=backgroundPopup]').fadeIn('slow');
            $('[id$=MessagePopUp]').fadeIn('slow');
           

        }
        popupStatus = 1;  
       
    }


    //disabling popup with jQuery magic!
    function disablePopup() {
        //disables popup only if it is enabled
        if (popupStatus == 1) {
            $('[id$=backgroundPopup]').fadeOut('slow');
            $('[id$=MessagePopUp]').fadeOut('slow');
         
        }
        popupStatus = 0;
    }


    //centering popup
    function centerPopup() {
        //request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $('[id$=MessagePopUp]').height();
        var popupWidth = $('[id$=MessagePopUp]').width();
        //centering
        $('[id$=MessagePopUp]').css({
            'position': 'absolute',
            'top': windowHeight / 2 - popupHeight / 2,
            'left': windowWidth / 2 - popupWidth / 2
       });
        //only need force for IE6

        $('[id$=backgroundPopup]').css({
            'height': windowHeight
        });

    }


    $(document).ready(function () {
       

        //LOADING POPUP
        //Click the button event!
        $('[ID$=MessageButton]').click(function () {
            //centering with css
            centerPopup();
            //load popup
            loadPopup();
        });

       
        //CLOSING POPUP
        //Click the x event!
        $('[id$=popupContactClose]').click(function () {
            disablePopup();
        });

            //Click out event!
        $('[id$=backgroundPopup]').click(function () {
            disablePopup();
        });

    });

</script>

And the CSS styles.

#MessagePopUp
{
    display:none;  
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6*/  
    height:384px;  
    width:408px;  
    background:#FFFFFF;  
    border:2px solid #cecece;  
    z-index:2;  
    padding:12px;  
    font-size:13px;  
}

#backgroundPopup  
{
    display:none;  
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6*/  
    height:100%;  
    width:100%;  
    top:0;  
    left:0;  
    background:#000000;  
    border:1px solid #cecece;  
    z-index:1;  
}  

#popupContactClose
{  
    font-size:14px;  
    line-height:14px;  
    right:6px;  
    top:4px;  
    position:absolute;  
    color:#6fa5fd;  
    font-weight:700;  
    display:block;  
}  


Pop up loads sometimes not all the time  When it loads it loads perfect except it doesn't stay for more than 2 seconds.  I went through the script with breakpoints and everything  happens as it should.  On message button click it goes to the proper load function.

Any help would be appreciated.
Thank you
0
Comment
Question by:Claudiu10
  • 2
2 Comments
 

Accepted Solution

by:
Claudiu10 earned 0 total points
ID: 34989433
sorry figured it out.  Button was causing post back.  So used an html button instead.
Thank you
0
 

Author Closing Comment

by:Claudiu10
ID: 34989437
Button was causing post back
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question