fixing z-index conflicts

edirpedro · Aug 9, 2017 · a07afb9 · a07afb9
1 parent 93cd6e4
commit a07afb9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/acf-flexible-content-modal.php b/acf-flexible-content-modal.php
@@ -4,7 +4,7 @@
  * Plugin Name: ACF Flexible Content Modal
  * Description: Make ACF Flexible Content editing the content of each layout using a Modal window.
  * Plugin URI: http://wordpress.org/plugins/acf-flexible-content-modal/
- * Version: 1.1.3
+ * Version: 1.1.4
  * Author: Edir Pedro
  * Author URI: http://edirpedro.com.br
  * License: GPL2

diff --git a/readme.txt b/readme.txt
@@ -3,7 +3,7 @@ Contributors: edir
 Tags: acf, advanced-custom-field, flexible-content
 Requires at least: 4.5.2
 Tested up to: 4.8.1
-Stable tag: 1.1.3
+Stable tag: 1.1.4
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -33,8 +33,9 @@ If you want to name each of the flexible content layout, you can use the ACF hoo
 
 == Changelog ==
 
-= 1.1.3 =
-* Fixed ACF Tooltips and Popups
+= 1.1.4 =
+* Fixed ACF Tooltips and Popups.
+* Fixed modal overlay hiding some elements like editor dropdown.
 
 = 1.1.2 =
 * Nested FC bugfix.

diff --git a/script.js b/script.js
@@ -60,8 +60,8 @@ function acf_fc_modal_open() {
 		var caption = layout.find('> .acf-fc-layout-handle').html();
 		layout.find('.acf-fc-modal-title').html(caption + '<a class="acf-icon -cancel" href="javascript:acf_fc_modal_remove()">');
 		layout.addClass('-modal');
-		jQuery("body").append("<div id='TB_overlay'></div>");
-		jQuery("#TB_overlay").click(acf_fc_modal_remove);
+		jQuery("body").append("<div id='acf-flexible-content-modal-overlay'></div>");
+		jQuery("#acf-flexible-content-modal-overlay").click(acf_fc_modal_remove);
 		jQuery('body').addClass('acf-modal-open');
 	}
 }
@@ -71,5 +71,5 @@ function acf_fc_modal_remove() {
 	jQuery('body').removeClass('acf-modal-open');
 	jQuery('.acf-flexible-content .layout.-modal > .acf-fc-layout-handle').click(); // To reload layout title
 	jQuery('.acf-flexible-content .layout').removeClass('-modal');
-	jQuery("#TB_overlay").remove();
+	jQuery("#acf-flexible-content-modal-overlay").remove();
 }
diff --git a/style.css b/style.css
@@ -20,7 +20,7 @@
 
 .acf-tooltip,
 .acf-fc-popup {
-	z-index: 900000 !important;
+	z-index: 10002 !important;
 }
 
 /* All collapsed */
@@ -38,8 +38,20 @@ body.acf-modal-open {
 	overflow: hidden;	
 }
 
+#acf-flexible-content-modal-overlay {
+	background: #000;
+	opacity: 0.7;
+	filter: alpha(opacity=70);
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 10000;
+}
+
 .acf-flexible-content .layout.-modal {
-	z-index: 100060;
+	z-index: 10001;
 	position: fixed !important;
 	top: 5vh !important;
 	left: 0 !important;
@@ -96,4 +108,3 @@ body.acf-modal-open {
 .acf-icon.-pencil:before {
 	font-size: 12px;	
 }
-