Problem with jQuery dialogs

@opajaap,

Hi, thanks for informing me. Actually, EML does not globally modify jQuery dialog behavior, it uses it solely for creating its custom dialog popups like your plugin does. I tested plugins together and found out that removing wp_enqueue_style ( 'wp-jquery-ui-dialog' ); from the admin_enqueue_scripts action solved the issue. The line was added many years ago and all this time worked well. I will check this more carefully and release an update soon.

Best,
-Nadia

Thank you!

@opajaap,

Hi again! I looked deeper into the issue and found out that:

(1) WP offers a special CSS for jQuery Dialog which I use in EML.

(2) Your plugin is incompatible with this CSS (it’s a z-index issue with the .ui-dialog block and .ui-widget-overlay block). So I can add a special compatibility workaround to EML but in case any other plugin enqueues wp-jquery-ui-dialog CSS for the admin, you’ll run into the same issue with it.

To make sure I deactivated EML at all, then added this code to my theme’s function.php

add_action( 'admin_enqueue_scripts', 'twtw_admin_enqueue_scripts' );

function twtw_admin_enqueue_scripts() {
	wp_enqueue_style ( 'wp-jquery-ui-dialog' );
}

And it’s broken your dialog popup as well.

I haven’t found where exactly you set the z-index for your .ui-dialog. I found that myself I previously (years ago) added the style

.eml-dialog-modal {
    /*z-index: 300000 !important;*/
}

I have commented it out for now, as you can see, and all works seemingly well. So, when wp-jquery-ui-dialog is enqueued it sorts it out for me these days. Though I need to do more tests.

Resume: this looks like your plugin needs some update too ??

Best,
-Nadia

• This reply was modified 3 years, 6 months ago by webbistro.
• This reply was modified 3 years, 6 months ago by Steven Stern (sterndata).

I set the css for the jquery dialog in its activation only; i think that this is the proper way.
Example from wp-photo-album-plus/js/wppa-tinymce-shortcodes.js:

// Add the wppa button to the mce editor
tinymce.PluginManager.add('wppagallery', function(editor, url) {

		function openWppaShortcodeGenerator() {

			var opt = {
						modal:		true,
						resizable: 	true,
						width:		720,
						show: 		{
										effect: 	"fadeIn",
										duration: 	400
									},
						closeText: 	"",
						close: 		function(event,ui) {

									},
						open: 		function(event,ui) {
										wppaGalleryEvaluate();
									}
						};

			jQuery( "#wppagallery-form" ).dialog(opt).dialog( "open" );

			jQuery( '.ui-widget-header' ).css( {
											background:			'none',
										});

			jQuery( '.ui-dialog' ).css( {
											boxShadow: 			'0px 0px 5px 5px #aaaaaa',
											borderRadius: 		wppaBoxRadius+'px',
											padding: 			'8px',
											backgroundColor: 	wppaModalBgColor,
											boxSizing: 			'content-box',
											zIndex: 			100000,
										});

			jQuery( '.ui-dialog-titlebar' ).css( {
													lineHeight: '0px',
													height: 	'24px',
													fontSize: 	'18px',
													fontWeight: 'bold',
												});

			jQuery( '.ui-dialog-title' ).css( {
													position: 	'absolute',
													top: 		'15px',
													fontSize: 	'18px',
													fontWeight: 'bold',
											});

			jQuery( '.ui-button' ).css(	{
											backgroundImage: 	wppaModalQuitImg,
											padding:			0,
											position: 			'absolute',
											right: 				'8px',
											top: 				'20px',
											width: 				'16px',
											height: 			'16px',
										});

			jQuery( '.ui-widget-overlay' ).css( {
													background:	'none',
												});

			jQuery( '.ui-button' ).attr( 'title', 'Close' );

			jQuery( '.ui-icon-closethick' ).css( {
											display: 			'none',
										});

So this css only works when my dialog is active

@opajaap,

I meant that EML is not a culprit of the problem. If anyone enqueues wp-jquery-ui-dialog CSS, which is a part of the WP core (/wp-includes/css/jquery-ui-dialog.css), for admin pages including those where your plugin enqueues its CSS, then it will lead to a problem with your plugin.

Best,
-Nadia

Yes, unfortunately you will be right. I am not glad with wp forcing me to this css depending of whether its used or not by someone else. If it would be loaded always, i could have been able to fix this many years ago.

When i specify the css as how it should be done according to the jquery documentation, i expect it to work.

In any case, its not your problem, and i thank you for giving me the insight into this.
I will dig into.

Case closed

@opajaap,

Well, actually the simplest fix might be just setting z-index: 300000; instead of 100000, since in /wp-includes/css/jquery-ui-dialog.css .ui-widget-overlay has z-index: 100101;.

Best,
-Nadia

@webbistro
FYI: From the changelog wppa 8.0.5:

WPPA now uses wp-jquery-ui-dialog css file, and code has been changed to be compatible with it, to avoid conflicts with other plugins that use it also.

@opajaap,

Cool! Thanks for letting me know.

Best,
-Nadia