Title: Problem with jQuery dialogs Last modified: September 19, 2021 --- # Problem with jQuery dialogs * Resolved [Jacob N. Breetvelt](https://wordpress.org/support/users/opajaap/) * (@opajaap) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/) * When this plugin is active, the use of jQuery dialog by other plugins is no longer possible at the backend. * Example: Plugin [https://wordpress.org/plugins/wp-photo-album-plus/](https://wordpress.org/plugins/wp-photo-album-plus/) uses jQuery dialog for shortcode generators to generate customized shortcodes. When Enhanced Media Library is installed, these dialogs no longer work. * A plugin should never ‘globally’ modify the behaviour of components that may also be used by others. Viewing 9 replies - 1 through 9 (of 9 total) * Plugin Author [webbistro](https://wordpress.org/support/users/webbistro/) * (@webbistro) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14886649) * [@opajaap](https://wordpress.org/support/users/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 * Thread Starter [Jacob N. Breetvelt](https://wordpress.org/support/users/opajaap/) * (@opajaap) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14886789) * Thank you! * Plugin Author [webbistro](https://wordpress.org/support/users/webbistro/) * (@webbistro) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14886940) * [@opajaap](https://wordpress.org/support/users/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 4 years, 8 months ago by [webbistro](https://wordpress.org/support/users/webbistro/). - This reply was modified 4 years, 8 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). * Thread Starter [Jacob N. Breetvelt](https://wordpress.org/support/users/opajaap/) * (@opajaap) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14892730) * 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 * Plugin Author [webbistro](https://wordpress.org/support/users/webbistro/) * (@webbistro) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14895005) * [@opajaap](https://wordpress.org/support/users/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 * Thread Starter [Jacob N. Breetvelt](https://wordpress.org/support/users/opajaap/) * (@opajaap) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14896480) * 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 * Plugin Author [webbistro](https://wordpress.org/support/users/webbistro/) * (@webbistro) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14896521) * [@opajaap](https://wordpress.org/support/users/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 * Thread Starter [Jacob N. Breetvelt](https://wordpress.org/support/users/opajaap/) * (@opajaap) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14923617) * [@webbistro](https://wordpress.org/support/users/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. * Plugin Author [webbistro](https://wordpress.org/support/users/webbistro/) * (@webbistro) * [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14924935) * [@opajaap](https://wordpress.org/support/users/opajaap/), * Cool! Thanks for letting me know. * Best, -Nadia Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Problem with jQuery dialogs’ is closed to new replies. * ![](https://ps.w.org/enhanced-media-library/assets/icon-256x256.png?rev=980107) * [Enhanced Media Library](https://wordpress.org/plugins/enhanced-media-library/) * [Frequently Asked Questions](https://wordpress.org/plugins/enhanced-media-library/#faq) * [Support Threads](https://wordpress.org/support/plugin/enhanced-media-library/) * [Active Topics](https://wordpress.org/support/plugin/enhanced-media-library/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/enhanced-media-library/unresolved/) * [Reviews](https://wordpress.org/support/plugin/enhanced-media-library/reviews/) * 9 replies * 2 participants * Last reply from: [webbistro](https://wordpress.org/support/users/webbistro/) * Last activity: [4 years, 8 months ago](https://wordpress.org/support/topic/problem-with-jquery-dialogs/#post-14924935) * Status: resolved