-1

我正在关注 jQuery UI 网站上的模态对话框示例，但没有任何运气可以显示对话框。该示例通过单击按钮创建并打开对话框，但我试图通过单击 TD 元素来启动它。那可能吗？

4

2 回答 2

0

这段代码基本上创建了一个块 UI。您可以使用 jquery blockUI 插件，而不是使用 jquery block UI 对话框。您可以参考链接以了解代码。 http://www.malsup.com/jquery/block/#demos 在下面的示例中，#yourtd_id 是您的 td 的 id，而 #your_div 是您想要制作为模态的 div。单击 td 时，.blockUI 是一个在屏幕上显示 your_div 的类。现在它就像一个模态对话框。要退出模态对话框，请在 #your_div 上插入一个按钮并将 id 指定为 #cancel_btn。单击#cancel_btn 时，.unblockUI() 解除对UI 的阻止，即解除对模式对话框的阻止。

 $(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();
    });
  });

这会奏效。我希望这会对你有所帮助。

于 2013-09-08T15:48:24.303 回答
0

假设您的td元素具有clickable_tdid 并且您的对话框块也具有dialogid，因此您可以将 td emelent 的单击事件处理程序与on()函数对象附加，并在捕获的点击时显示带有函数对象的对话框块，dialog()如下所示：

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

注意：默认的 jQuery z-index 是 100，如果你的布局元素有更高的值，试试这个：

$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})});
于 2013-09-08T15:12:21.740 回答