можно открыть диалоговое окно JQuery UI, нажав на элемент TD?

Question

Я следую примеру модального диалога на веб-сайте jQuery UI, но не успеваю отобразить диалог. В примере создается и открывается диалоговое окно с помощью кнопки-cllick, но я пытаюсь запустить его из щелчка на элементе TD. Это возможно?

Answer 1

Предположим, что ваш td элемент имеет clickable_td идентификатор, а также ваш диалог блок имеет dialog идентификатор, поэтому вы можете прикрепить кнопку обработчик события тд emelent с объектом функции on() и отображения диалогового блока с dialog() объекта функции в то время как щелчки захватили, как это :

$('#clickable_td').on('click',function(){$('#dialog').dialog();}); 

Примечание: Jquery г-индекс по умолчанию 100, если элементы макетов имеют более высокое значение, попробуйте вместо этого:

$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})}); 

Answer 2

Этот код в основном создает пользовательский интерфейс блока. Вместо использования интерфейса пользовательского интерфейса jquery block вы можете использовать плагин jquery blockUI. Вы можете сослаться на ссылку, чтобы понять код. http://www.malsup.com/jquery/block/#demos В приведенном ниже примере #yourtd_id - это идентификатор вашего td и #your_div - это div, который вы хотите сделать модальным. Когда нажимается td .blockUI - это класс, который отображает ваш_div на экране. Теперь это похоже на модальный диалог. Чтобы выйти из модального диалога, вставьте кнопку на #your_div и укажите id как #cancel_btn. При щелчке на #cancel_btn .unblockUI() разблокирует пользовательский интерфейс, который блокирует модальный диалог.

$(document).ready(function() { 
    $('#yourtd_id').click(function() { 
     $.blockUI({ message: $('#your_div') }); 

     //keep a cancel button on #your_div. for eg: consider its id as #cancel_btn 

    }); 

    $('#cancel_btn').click(function(){ 
     $.unblockUI(); 
    }); 
    }); 

Это будет работать. Надеюсь, это поможет вам.