使用Javascript / jQuery的彈出消息

Question

我基於如何使用jQuery生成簡單彈出窗口來創建彈出消息，以便您可以完成一些數據以獲得結果。

該問題的答案中的代碼效果很好，但是我需要-至少-2種不同的彈出消息，但我無法正常工作。

出現彈出消息，但是當我單擊“取消”時，它不會關閉-當我單擊“打開”按鈕時，它會關閉。 你能看到我做錯了嗎？ 我是Java的新手。

另外，如果用戶點擊下載（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> 

Answer 1

看一下這段代碼：

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

因此，他們需要：

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

在標識jQuery中的元素之前，請不要忘記＃號。