1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

how to have two popups on a page that show separately?

Discussion in 'BlackHat Lounge' started by mmafj, Nov 27, 2016.

  1. mmafj

    mmafj Newbie

    Joined:
    Jan 18, 2016
    Messages:
    31
    Likes Received:
    0
    Hello guys
    the question is: i have a webpage and two popups, i want them to show when someone click on specific elements on page, i mean popup1 shows when element1 (like image1) is clicked and popup2 shows when element2 (like image2) is clicked, how can i achieve that?
     
  2. Stephen Kurt

    Stephen Kurt BANNED BANNED

    Joined:
    Jan 15, 2016
    Messages:
    50
    Likes Received:
    10
    It can be done throught js and a pop-up script. jQuery makes things much easier, but don't let the two images stack together.
     
    • Thanks Thanks x 1
  3. mmafj

    mmafj Newbie

    Joined:
    Jan 18, 2016
    Messages:
    31
    Likes Received:
    0
    i'm noob in js but what do you think about this:

    <body>
    <div class="image-wrapper">
    <div id="image1">IMAGE1 HERE</div>
    <div id="image2">IMAGE2 HERE</div>
    </div>
    <style type="text/css">
    .image-wrapper {
    position: relative;
    }
    #image1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999999;
    }
    #image2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 300;
    z-index: 99999999;
    }
    </style>
    <script type="text/javascript">
    $(function(){
    $('#image1').click(function(){
    POPUP1 SCRIPT HERE
    $(this).hide();
    });
    });

    $(function(){
    $('#image2').click(function(){
    POPUP2 SCRIPT HERE
    $(this).hide();
    });
    });
    </script>
    </body>