我在qazxsw poi中创建了一个弹出消息,因此您可以完成一些数据以获得结果。
回答这个问题的代码效果很好,但是我需要 - 至少2个不同的弹出消息,我无法正常工作。
弹出消息出现,但是当我点击取消时它不会关闭 - 当我点击“打开”按钮时它会关闭。你能看出我做错了什么吗?我是Javascript的新手。
此外,如果用户点击下载(Descargar),我希望弹出窗口关闭。
How to generate a simple popup using jQuery
$(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>
他们需要如此:
$('closeticketsGeneradosPop').on('click', function() {
$('#ticketsGeneradosPop').slideFadeToggle();
return false;
});
不要忘记#之前在jQuery中标识一个元素。