2016-09-29 98 views
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"); 
    }); 
}); 

的信息工作正常,它与绘画的变化,隐藏了不完整的行...唯一的问题是如何出现的对话框。

+0

我看到的唯一的事情就是你在dialog的右边+ 15添加dialog2。不应该是正确的-15? – Focki

+0

是真的,改变了它,但仍然无法正常工作。 –

回答

0

问题解决了。代码没有错,只是刷新浏览器和删除cookie的问题。我讨厌浏览器没有更新.js。