Oct 16, 2011

jQuery Popup on button click instead of link navigation

I see there are a lot of jQuery popups. Mostly work on link navigation means when you click on link then it will show popup. Suppose you want to show popup on button click then here is the simple trick to do this. I take fancybox jquery popup for example. This will call ajax.php. For this, I take a link,set display none and trigger it on button click.



    <script type="text/javascript">  
         $(document).ready(function() {  
             $("#btn").click(function() {  
             $("#various2").attr('href', 'ajax.php?ID=' + $("#txt").val());  
                 $("#various2").fancybox({  
                     'width': '50px',  
                     'height': '700',  
                     'autoScale'   : false  
                 }  
                 );  
                 $("#various2").trigger('click');  
      
             });  
         });  
     </script>  
      
    <body>  
    <input type="text" id="txt" />  
    <input type="button" id="btn" />   
      
    <a id="various2" style="display:none">Ajax</a>  
      
    </body>  

and in ajax.php:


    <h2>This comes from ajax request and Your number is   
    <?php echo $_GET['ID'] ?></h2>