Блог

Я хочу, чтобы вся строка таблицы отображалась во всплывающем окне для шахматной игры.

Я пошел в http://thephuse.com/design-and-usability/clickable-table-rows-with-jquery / который говорит мне добавить и добавляет:

 <!-- make entire <tr> clickable-->
<script>
jQuery( function($) {$('tbody tr[data-href]').addClass('clickable').click(
function(){window.location = $(this).attr('data-href');}).find('a').hover(
function() {$(this).parents('tr').unbind('click');},
function() {$(this).parents('tr').click( function()
{window.location = $(this).attr('data-href');});});});
</script> 
  

Но это приводит к полноэкранному окну браузера. Я хочу, чтобы всплывающее окно с центром, подобное этому сценарию, создавалось:

 <!--popup centered window-->
<script>function PopupCenter(pageURL, title,w,h)
{var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' w ', height=' h ', top=' top ', left=' left);} </script>
  

Да, я пробовал

 <tr class="PopupCenter" data-href="http://google.com"> 
  

но результирующее всплывающее окно по-прежнему полноэкранное; как вы можете видеть из таблицы игр на
http://chesstao.com/test-2.php

класс PopupCenter не применяется.

Что я могу сделать?

Добавление:

 <tr onclick="PopupCenter('games/$game', 'myPop1',400,400);"> dw
  

Я пробую другое решение, но в этом также есть интересная ошибка. На этот раз я использую всплывающий код фотограф кредит под фотографией в http://chesstao.com/test-2.php
Я хочу щелкнуть в любом месте и отобразить всплывающее окно.

Интерактивный код:

 <script>
jQuery( function($) {$('tbody tr[data-href]').addClass('clickable').click(
function(){temp($(this).attr('data-href');}).find('a').hover(
function() {$(this).parents('tr').unbind('click');},
function() {$(this).parents('tr').click( function()
{temp($(this).attr('data-href');});});});
</script>

<!--Another Pop-up for diagram--> 
<script src="js/jquery.popupWindow-min.js" ></script>
<script>$('.diagram-popup').popupWindow({height:500, width:800}); </script>
  

и HTML:

 <tr class="gradeA" data-href="games/BG-1001.php" ><td>07/17/1998</td><td>EU-ch U12</td>
<td>Mureck</td><td>0000</td><td>Khramiankov, Yuri</td><td>B99
</td><td style="display:none;visibility:hidden;">games/BG-1001.php</td></tr>
  

Замените оба

 window.location = $(this).attr('data-href');
  

с

 PopupCenter($(this).attr('data-href'), "Some Title", 100, 100);
  

или окно любого размера, которое вы хотите

Примечание: вам нужно где-то PopupCenter определить в своем скрипте, чтобы использовать его.

Полный ответ будет таким:

 <script type="text/javascript">
jQuery(function($) {
    $('tbody tr[data-href]').addClass('clickable').click(
        function(){
            PopupCenter($(this).attr('data-href'), 'title', 100, 100)
        }
    ).find('a').hover(
        function() {
            $(this).parents('tr').unbind('click');
        },
        function() {
            $(this).parents('tr').click( 
                function() {
                    PopupCenter($(this).attr('data-href'), 'title', 100, 100);
                }
            );
        }
    );
});

function PopupCenter(pageURL, title,w,h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, '   
        'directories=no, status=no, menubar=no, scrollbars=no, resizable=no, '   
        'copyhistory=no, width=' w ', height=' h ', top=' top ', left=' left);
}

</script> 
  

Вам нужно будет указать заголовок и правильные значения высоты и ширины. Но, по-моему, это все.