Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 891
  • Last Modified:

jquery popup

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
Claudiu10
Asked:
Claudiu10
  • 2
1 Solution
 
Claudiu10Author Commented:
sorry figured it out.  Button was causing post back.  So used an html button instead.
Thank you
0
 
Claudiu10Author Commented:
Button was causing post back
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now