Popup Message using Javascript / jQuery

Question

I based in How to generate a simple popup using jQuery to creat a Popup Message so you can complete some data to get a result.

The code in the answer to that question works good, but I need - at least- 2 different popup message and I can't get that working.

The popup message appears, but when I hit cancel it doesn't close - and it does when i hit the "open" button. Can you see what I'm doing wrong? I'm new to Javascript.

Also, I would like the popup to close if the user hits download (Descargar).

$(function() {
  $('#ticketsGenerados').on('click', function() {
    $('#ticketsGeneradosPop').slideFadeToggle();
    return false;
  });

  $('closeticketsGeneradosPop').on('click', function() {
    $('#ticketsGeneradosPop').slideFadeToggle();
    return false;
  });
});


$(function() {
  $('#ticketsCierreAdmin').on('click', function() {
    $('#ticketsCierreAdminPop').slideFadeToggle();
    return false;
  });

  $('closeticketsCierreAdminPop').on('click', function() {
    $('#ticketsCierreAdminPop').slideFadeToggle();
    return false;
  });
});


$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({
    opacity: 'toggle',
    height: 'toggle'
  }, 'fast', easing, callback);
};

/* Z-index of #mask must lower than #boxes .window */

.messagepop {
            background-color:#FFFFFF;
            border:1px solid #999999;
            cursor:default;
            display:none;
            margin-top: 15px;
            position:absolute;
            text-align:left;
            width:394px;
            z-index:50;
            padding: 25px 25px 20px;
        }

        .labelPop {
            display: block;
            margin-bottom: 3px;
            padding-left: 15px;
            text-indent: -15px;
        }

        .messagepop p, .messagepop.div {
            border-bottom: 1px solid #EFEFEF;
            margin: 8px 0;
            padding-bottom: 8px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="messagepop pop" id="ticketsGeneradosPop">
  <form method="post" id="new_message" action="bajadas/ticketsGenerados.php">
    <p>Fechas a considerar en el reporte:</p>
    <p><label class="labelPop" for="email">Fecha inicio</label><input type="date" name="fechaInicio" /></p>
    <p><label class="labelPop" for="body">Fecha fin</label><input type="date" name="fechaFin" /></p>
    <p><input type="submit" value="Descargar" /> o <a id="closeticketsGeneradosPop" href="#">Cancelar</a></p>
  </form>
</div>

<div class="messagepop pop" id="ticketsCierreAdminPop">
  <form method="post" id="new_message" action="bajadas/ticketsCierreAdministrativo.php">
    <p>Fechas a considerar en el reporte:</p>
    <p><label class="labelPop" for="email">Fecha inicio</label><input type="date" name="fechaInicio" /></p>
    <p><label class="labelPop" for="body">Fecha fin</label><input type="date" name="fechaFin" /></p>
    <p><input type="submit" value="Descargar" /> o <a id="closeticketsCierreAdminPop" href="#">Cancelar</a></p>
  </form>
</div>

<a href="bajadas/ticketsAbiertos.php" class="botonesBajadas">Tickets abiertos</a>
<a href="#" class="botonesBajadas" id="ticketsGenerados">Tickets generados</a>
<a href="#" class="botonesBajadas" id="ticketsCierreAdmin">Tickets cierre adminitrativo</a>

Quick tip when asking for help - instead of pasting all your code here recreate your issue in a codepen. (www.codepen.io). Half the time you'll find the problem just doing that, the other half it makes it much easier for us to step in and debug the code. — Stan Lindsey
– Stan Lindsey, Commented Sep 13, 2018 at 14:59
@StanLindsey EVEN BETTER is to click the <> snippet editor and show the issue HERE instead — mplungjan
– mplungjan, Commented Sep 13, 2018 at 15:01
In the example you are referencing, there is an <a href> tag that shows the pop-up. I do not see that in your code. — sean
– sean, Commented Sep 13, 2018 at 15:02
Please update the snippet I wrote for you with relevant CSS and check it is what you are currently having — mplungjan
– mplungjan, Commented Sep 13, 2018 at 15:02

Gaspar Teixeira · Accepted Answer · 2018-09-13 15:14:03Z

2

Take a look on this code:

    $('closeticketsGeneradosPop').on('click', function() {
    $('#ticketsGeneradosPop').slideFadeToggle();
    return false;
  });

They need to be thus:

    $('#closeticketsGeneradosPop').on('click', function() {
    $('#ticketsGeneradosPop').slideFadeToggle();
    return false;
  });

Don't forget the # before to identify an element in jQuery.

answered Sep 13, 2018 at 15:14

Gaspar Teixeira

1,27711 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NGabioud Over a year ago

Thank you very much! :)

Gaspar Teixeira Over a year ago

Glad it helped!

Collectives™ on Stack Overflow

Popup Message using Javascript / jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related