Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Jquery Dialog Popup

    I have a pop up where I want it to dynamically pop up in specific locations linked to which button was clicked. The first time you click when getting to the page, it pops up in the middle of the screen. The second time it will pop up where its supposed to, and if you keep clicking only the specified buttons to use this, it will continue to pop up correctly. However, if you click on anything else, even just the screen or bg, and then go to click on one of the buttons for it to pop up, it will go back to the middle again, and it will do that every time unless you continually click on the pop up buttons. So it works, but only if you click on only pop up buttons. No idea why.

    PHP Code:
    $(document).ready(function() {
        var 
    clicked = $(this);
        var 
    dialogpos = $('#bottombardialog');
        
        
    // open the dialog box
        
    $('footer a img').click(function(e) {
            
    clicked = $(this).attr('id');
            var 
    infoPage = $('#'+clicked+'').attr('alt').toLowerCase();
            
            if (
    clicked == 'anncbtn' || clicked == 'infobtn' || clicked == 'twitbtn' ||
                    
    clicked == 'facebtn' || clicked == 'googlebtn' || clicked == 'appbtn' ||
                    
    clicked == 'mailbtn' || clicked == 'chatbtn') {
                $(
    '#bottombardialog').dialog('open');
                
    e.stopPropagation();
                
                $(
    '#bottombardialog').dialog('option''title'''+infoPage+'');
                $(
    "#bottombardialog").dialog('option''position', {
                    
    my'left top-100%',
                    
    at'left top-100%',
                    
    of: $('#'+clicked+''),
                    
    collision'fit'
                
    });
                $(
    '#dialogcontent').load(''+infoPage+'.html');
            }
        });

        
    // close dialog box if clicking anywhere else on page
        
    $('html').click(function(e) {
            
    console.log('click - body');
            $(
    '#bottombardialog').dialog('close');
            
    clicked = $(this);
        });
        
    // clicked in dialog box
        
    $('#bottombardialog').click(function(e) {
            
    console.log('click - dialog');
            
    e.stopPropagation();
            
    clicked 'dialog';
        });
        
        
    // dialog set up
        
    $('#bottombardialog').dialog({
            
    autoOpenfalse,
            
    show: {
                
    effect'drop',
                
    duration50,
                
    direction'down'
            
    },
            
    hide: {
                
    effect'drop',
                
    duration50,
                
    direction'down'
            
    },
            
    resizablefalse,
            
    draggablefalse,
            
    modalfalse
        
    });
    }); 

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    maybe some html??

    IMHO, the easiest way to takle this is to make divs and position them where you want and then hide them. Use the buttons to show the appropriate div. And I guess(?) to hide the others.
    Evolution - The non-random survival of random variants.

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    The HTML is a simple div with nothing in it.

    I think I am just going to move to an unordered list, and show/hide as necessary for the bar. Would be more structured to my liking anyways.

    Thanks tho!


  •  

    Posting Permissions

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