Modifying dialog-boxes

[L3010]

Hi!

I have several ideas about modifications that i want to do to dialog-boxes on my forum.

1. Defaults:

    Is it possible to change the default data that is passed into a form in a dialog-box, (like the default parameters passed in the the dialog box form when creating a table)

2. Modifying the style of individual dialog-boxes:

    Is there a way to target individual dialog-boxes with CSS? (Example: Change the color of a confirmation-type-dialog box to orange)

 

3. Modifying the HTML of individual dialog-boxes:

    Is there a way change the HTML-code that is executed in the dialog-boxes?

4. Disable resizing:

    Is there a way to disable resizing of dialog-boxes?

Would anyone be willing to help me?

Leo

[Chris]

Nov 10, 2021 2:36:24 GMT -8 L3010 said:

Hi!

I have several ideas about modifications that i want to do to dialog-boxes on my forum.

1. Defaults:

    Is it possible to change the default data that is passed into a form in a dialog-box, (like the default parameters passed in the the dialog box form when creating a table)

2. Modifying the style of individual dialog-boxes:

    Is there a way to target individual dialog-boxes with CSS? (Example: Change the color of a confirmation-type-dialog box to orange)

 

3. Modifying the HTML of individual dialog-boxes:

    Is there a way change the HTML-code that is executed in the dialog-boxes?

4. Disable resizing:

    Is there a way to disable resizing of dialog-boxes?

Would anyone be willing to help me?

Leo

You can use jQuery's .on method to listen for the custom "dialogopen" event to have the function you passed in to that method called back each time a jQuery dialog is opened.

$(document).on('dialogopen', function(event){

//code to modify dialog goes here

});


This will of course intercept every jQuery dialogbox so you can use the filter parameter to target specific dialogs. For example to get your code to run whenever the participated button is pressed and the dialog open you would do this

$(document).on('dialogopen','#recent-threads', function(event){

//code to modify dialog goes here

});

^{right-click and inspect that dialog when it opens to see why the id of #recent-thread is applicable to the contents of that particular dialog}

The wysiwyg dialogs are not as friendly since they don't use IDs but if you're looking specifically to intercept only wysiwyg dialogs then you can employ the .wysiwyg-dialog class to capture just wysiwyg dialogs.

$(document).on('dialogopen','.wysiwyg-dialog', function(event){

//code to modify dialog goes here

});


You will then need to determine if this is the dialog you are interested in by checking for something unique to your dialog. The table dialog, for example, has an input with a name of "cols" to accept a number for column so you could use that to determine if this is indeed the dialog as well as change the default values (right-click and inspect to see the HTML for the other inputs);

The classes and identifiers involved determine how you would be able to style the dialog (once again, right-click and inspect to see those classes and identifiers being employed in the HTML, it's all there at your fingertips)

You can remove the ability to resize by destroying jquery UI's resizing addon for that particular dialog using the following line in your callback function

$(event.target).closest('.ui-dialog').data('resizable').destroy()