possible to open jQuery UI dialog from click on TD element?

Question

I'm following the modal dialog example on jQuery UI website but not having any luck getting the dialog to be displayed. The example creates and opens the dialog from a button-cllick but I'm trying to launch it from a click on a TD element. Is that possible?

01e · Answer 1 · 2013-09-08T20:06:09.630

0

Assume that your td element has clickable_td id and also your dialog block has dialog id, So you can attach click event handler for td emelent with the on() function object and show your dialog block with dialog() function object while clicks captured like this:

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

NOTE: The default jQuery z-index is 100, if your layouts' elements have higher value of it, try this instead:

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

edited Sep 08 '13 at 20:06

answered Sep 08 '13 at 15:12

01e

691
3
14

@Saber Haj Rabiee: this is essentially what I'm doing. I now believe my problem may be related to z-index. http://stackoverflow.com/questions/14954104/why-jquery-ui-1-10-remove-jquery-dialog-zindex-option – Tim Sep 08 '13 at 15:33
@Tim Can you share your code? in jQuery UI 1.10.3,the default ui-front z-index is 100,so if other layers have higher value of jQuery z-index,you need to change jQuery z-index. I'd update my post. – 01e Sep 08 '13 at 15:49
1

"try this" is not a explanation of why your solution will work @Saber; you've added slightly more explanation now so I'm deleting my earlier comment but I'd recommend you explain more about what's happening. The idea of the site is to be a resource for the future at the moment the most people will be able to do with your answer is copy and paste the code. See http://meta.stackexchange.com/questions/196187/is-try-this-bad-practice – Ben Sep 08 '13 at 19:34
@Ben Thanks for attention, I updated my post, let me know how you feel about it? – 01e Sep 08 '13 at 20:04

Gourav · Answer 2 · 2013-09-09T02:18:01.623

This code basically creates a block UI. Instead of using jquery block UI dialog, you can use jquery blockUI plugin. You can refer the link to understand the code. http://www.malsup.com/jquery/block/#demos In the below example #yourtd_id is the id of your td and #your_div is the div which you want to make as modal. When the td is clicked .blockUI is a class which display your_div on the screen. Now it like a modal dialog. To come out of the modal dialog insert a button on #your_div and give id as #cancel_btn. When the #cancel_btn is clicked .unblockUI() unblocks the UI i.e unblocks the modal dialog.

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

This will work.I hope this will help you.

Hi, your post has been flagged as "low quality", probably because it consists solely of code. You could massively improve your answer by providing an explanation of exactly how and why this answers the question? Many people typically downvote or will never upvote answers without explanation so it's in your best interests to do so. — Ben, Sep 08 '13 at 19:34
@Ben Now I have given complete information about how the code works. Have a look at it. — Gourav, Sep 09 '13 at 02:19

possible to open jQuery UI dialog from click on TD element?

2 Answers2