0
我目前正在开发一个网站画廊。我有一个部分,我展示了两位不同的作家作比较,您可以在两个屏幕之间单独通过绘画。你可以在http://164.132.103.92/comparador_index.php(把1和1000之间的两个数字并点击比较器)Javascript:有两个对话框的页面无法正常工作
我的问题是:有2个按钮,以jQuery对话框的形式显示每个绘画的单独信息。左侧对话框起作用;即使代码相同,右侧出现在屏幕的底部。我不明白我的问题,有人能帮助我吗? comparador.php
<div class="col_half">
<!-- 1st button and image block-->
<div id="imageDiv" style="margin-top: 5%; margin-bottom: 1%;">
<br>
<br>
<img src="" class="pop" id="imagen" alt="" style="width: 650px; height: 520px;">
<button type='button' id="prev" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
<button type='button' id="next" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
<button type='button' id="info" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
</div>
</div>
<div class="col_half col_last">
<!-- 2nd button and image block-->
<div id="imageDiv_cuadro2" style="margin-top: 5%; margin-bottom: 1%;">
<br>
<br>
<img src="" class="pop2" id="imagen_2" alt="" style="width: 650px; height: 520px;">
<button type='button' id="prev_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-left"></span></button>
<button type='button' id="next_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-arrow-right"></span></button>
<button type='button' id="info_2" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-info-sign"></span></button>
</div>
</div>
<div id="dialog" class="box follow-scroll dialog" title="Información de la imagen">
<table class="table">
<tr id="nombre">
<td>Nombre del autor</td>
<td><label id="aut"></label></td>
</tr>
<tr id="titulo">
<td>Titulo de la obra</td>
<td id="t"></td>
</tr>
<tr id="anno">
<td>Año</td>
<td id="a"></td>
</tr>
<tr id="sop">
<td>Soporte</td>
<td id="s"></td>
</tr>
<tr id="museo">
<td>Museo</td>
<td id="m"></td>
</tr>
</table>
</div>
<div id="dialog2" class="box follow-scroll dialog" title="Información de la imagen">
<table class="table">
<tr id="nombre2">
<td>Nombre del autor</td>
<td><label id="aut2"></label></td>
</tr>
<tr id="titulo2">
<td>Titulo de la obra</td>
<td id="t2"></td>
</tr>
<tr id="anno2">
<td>Año</td>
<td id="a2"></td>
</tr>
<tr id="sop2">
<td>Soporte</td>
<td id="s2"></td>
</tr>
<tr id="museo2">
<td>Museo</td>
<td id="m2"></td>
</tr>
</table>
</div>
imagen.js
$(function(){
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
},
resizable: false,
position: { my: "left", at: "left+15", of: window }
});
$("#info").on("click", function() {
$("#dialog").dialog("open");
});
$("#dialog2").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "blind",
duration: 1000
},
resizable: false,
position: { my: "right", at: "right+15", of: window }
});
$("#info_2").on("click", function() {
$("#dialog2").dialog("open");
});
});
的信息工作正常,它与绘画的变化,隐藏了不完整的行...唯一的问题是如何出现的对话框。
我看到的唯一的事情就是你在dialog的右边+ 15添加dialog2。不应该是正确的-15? – Focki
是真的,改变了它,但仍然无法正常工作。 –