www.webdeveloper.com
Results 1 to 6 of 6

Thread: Need help with a simple jquery popup.

  1. #1
    Join Date
    Jun 2014
    Posts
    5

    Need help with a simple jquery popup.

    Can someone help me with this code? I cant figure out how to get the second "popup2" button to display its content, it only displays the first popup content? Thank you!



    http://jsfiddle.net/mik123je/AXAs8/

  2. #2
    Join Date
    May 2014
    Location
    Tacoma
    Posts
    4
    You're using the same ID for both buttons. Looks like an easy fix to me!

  3. #3
    Join Date
    Jun 2014
    Posts
    5
    I've tried two different ID's but I don't think I alter my script correctly?? Is there an easier way then just duplicating everything and changing ID's>

  4. #4
    Join Date
    Jun 2014
    Posts
    5
    I was able to get it to work by copy and pasting the script for each button and changing the id's it seams like there should be an easier way to code this without the redundancy?

  5. #5
    Join Date
    May 2014
    Location
    Tacoma
    Posts
    4
    Well the buttons could probably have the same ID. To be honest, since they are just being styled you'd want to use classes .pop1 .pop2. But both buttons having the same ID for the js. I think the only thing that would need two different IDs would be the overlay_form.

    You're right, there could be an easier way. I am still fairly new js/jquery, so I apologize for not knowing that easier way! Hope someone else has some input.

  6. #6
    Join Date
    Sep 2007
    Location
    istanbul
    Posts
    315
    I am new to Jquery.
    I am trying this code:
    Code:
      
    <html>
    <head>
    <style type="text/css">
    #overlay_form, #overlay_form2 {
        position: absolute;
        border: 5px solid gray;
        padding: 10px;
        background: white;
        width: 270px;
        height: 190px;
    }
    #pop, #pop2 {
        display: block;
        border: 1px solid gray;
        width: 65px;
        text-align: center;
        padding: 6px;
        border-radius: 5px;
        text-decoration: none;
        margin: 0 auto;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    <script type="text/javascript">
    // http://www.webdeveloper.com/forum/showthread.php?296235-Need-help-with-a-simple-jquery-popup
    // http://jsfiddle.net/mik123je/AXAs8/
    // http://www.w3schools.com/jquery/jquery_ref_selectors.asp
    
    $(document).ready(function () {
    
        //open popup
        $("#pop, #pop2").click(function () {
    // alert(this.id);
    var ad;
    if(this.id=='pop') ad='#overlay_form'; 
    if(this.id=='pop2') ad='#overlay_form2'; 
    
     $(ad).fadeIn(1000);
    
            positionPopup(ad);
        });
    
        //close popup
        $("#close,#close2").click(function () {
            $(this).parents('form').fadeOut(500);
        });
    });
    
    //position the popup at the center of the page
    function positionPopup(ad) {
        if (!$(ad).is(':visible')) {
            return;
        }
        $(ad).css({
            left: ($(window).width() - $(ad).width()) / 2,
            top: ($(window).width() - $(ad).width()) / 7,
            position: 'absolute'
        });
    }
    
    //maintain the popup at center of the page when browser resized
    //$(window).bind('resize', positionPopup);
    
    </script>
    
    </head>
    <body>
    <a href="#" id="pop">PopUp</a>
    
    <br />
    <form id="overlay_form" style="display:none">
        
    <h2>CONTENT1</h2>
    
    <a href="#" id="close">Close</a>
    
    </form>
    <a href="#" id="pop2">PopUp2</a>
    
    <br />
    <form id="overlay_form2" style="display:none">
        
    <h2>CONTENT2</h2>
    
    <a href="#" id="close2">Close</a>
    
    </form>
    
    </body>
    </html>
    This code is working in Firefox 4.0b9
    Last edited by Ayşe; 06-11-2014 at 07:27 PM.
    Bismillahirrahmanirrahîm
    Hamd, Âlemlerin Rabbi, Rahmân, Rahîm, hesap ve ceza gününün (ahiret gününün) maliki Allah'a mahsustur. (Allahım!) Yalnız sana ibadet ederiz ve yalnız senden yardım dileriz. Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles