Saludos estimados amigos: Estoy utilizando un script para que aparezca una ventana popup cuando haga clic sobre un texto, el código es el siguiente:
Código PHP:
<head>
<meta charset="utf-8" />
<title>Simple Modal Dialog</title>
<link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
<?php
$sql_NoticiaX='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
FROM noticias
ORDER BY fecha_reg DESC
LIMIT 12';
$res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
while($dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
?>
<script type="text/javascript" charset="utf-8">
window.addEvent("domready", function(e){
$("modal<?= $dato['id_noticia'] ?>").addEvent("click", function(e){
e.stop();
var SM<?= $dato['id_noticia'] ?> = new SimpleModal({"btn_ok":"Ok"});
SM<?= $dato['id_noticia'] ?>.addButton("Ok", "btn primary", function(){
this.hide();
});
SM<?= $dato['id_noticia'] ?>.show({
"model":"modal",
"title":"<?= $dato['title'] ?>",
"contents":"<p><img src=<?= $dato['thumb'] ?> width=100 border=0><?= htmlspecialchars_decode($dato['body']) ?></p>"
});
})
});
</script>
<?php
}
?>
<link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
En el Body:
Código PHP:
<body>
<br><br>
<?php
$sql_NoticiaX='SELECT noticias.id_noticia, noticias.title, noticias.body, noticias.foto, noticias.thumb
FROM noticias
ORDER BY fecha_reg DESC
LIMIT 12';
$res_sqlNoticiaX=$mysqli2->query($sql_NoticiaX);
while($dato=$res_sqlNoticiaX->fetch_array(MYSQLI_BOTH)) {
?>
<ul>
<li id="modal<?= $dato['id_noticia'] ?>">
<a href="#"><?= $dato['title'] ?></a>
</li>
</ul>
<?php
}
?>
</body>
--------------------------------------------
El Codigo fuente resultante de esto es:
Código PHP:
<head>
<meta charset="utf-8" />
<title>Simple Modal Dialog</title>
<link rel="stylesheet" href="assets/css/reset.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../Source/assets/css/simplemodal.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="assets/javascript/mootools-core-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../Source/simple-modal.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.addEvent("domready", function(e){
$("modal2").addEvent("click", function(e){
e.stop();
var SM2 = new SimpleModal({"btn_ok":"Ok"});
SM2.addButton("Ok", "btn primary", function(){
this.hide();
});
SM2.show({
"model":"modal",
"title":"Noticia 2",
"contents":"<p><img src=./uploads/thumb_imagen013-101124685.jpg width=100 border=0><p>Tu saes maestro asi son las cosas:</p>
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul></p>"
});
})
});
</script>
<script type="text/javascript" charset="utf-8">
window.addEvent("domready", function(e){
$("modal1").addEvent("click", function(e){
e.stop();
var SM1 = new SimpleModal({"btn_ok":"Ok"});
SM1.addButton("Ok", "btn primary", function(){
this.hide();
});
SM1.show({
"model":"modal",
"title":"noticia sersa se jodio",
"contents":"<p><img src=./uploads/imagen013-101124685.jpg width=100 border=0><p>asasasas</p></p>"
});
})
});
</script>
<link rel="shortcut icon" type="image/png" href="http://simplemodal.plasm.it/apple-touch-icon.png" />
</head>
<body>
<br><br>
<ul>
<li id="modal2">
<a href="#">Noticia 2</a>
</li>
</ul>
<ul>
<li id="modal1">
<a href="#">noticia sersa se jodio</a>
</li>
</ul>
-------------
El problema es que solamente aparece el ultimo popup y no hace nada en los anteriores.
Agradezco mucho la ayuda que puedan brindarme.
Saludos
Americo
29-05-2014
PHP y Javascript
Temas Similares
Modo Hilado