fix: Glass Effect Conflicts with Modal

[iamibrahimriaz]

PR Type

What kind of change does this PR introduce?

• Bugfix
• Security fix
• Improvement
• New Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• Text changes
• Other... Please describe:

Description

Modals were not displaying correctly when nested inside parent containers with glass effect css (backdrop-filter). They could be clipped, mispositioned, or hidden behind other elements.

Solution:
Move modals to the document.body level when opened, ensuring they're rendered at the top-level DOM hierarchy, completely outside any parent container constraints. This guarantees:

• No clipping from parent overflow properties
• Proper z-index stacking at the document level
• Correct positioning relative to viewport
• Consistent behavior across all browsers

The modal is then restored to its original position when closed to maintain DOM structure integrity.

All modals can not moved down, search form modal issue fixed by using some css implementation.

Any linked issues

Fixes #2562

Checklist

• My code follows the WordPress coding standards

[RabbiIslamRony]

Problem:

• May close modals when clicking inside modal content
• Missing visibility check before closing

Solution:
Use event delegation on the modal element and only close when clicking the backdrop.
ript
// Close modal when clicking backdrop (not content inside)

$('body').on('click', '.directorist-modal-js', function (e) {
	// Only close if clicking the backdrop itself, not children
	if (e.target === this && $(this).hasClass('directorist-show')) {
		$(this).removeClass('directorist-show');
		restoreModalToOriginalPosition(this);
	}
});

Changes:

• ✅ Added visibility check (hasClass('directorist-show'))
• ✅ Simplified selector logic
• ✅ Direct element reference instead of jQuery wrapper

[iamibrahimriaz]

Problem:

• May close modals when clicking inside modal content
• Missing visibility check before closing

Solution: Use event delegation on the modal element and only close when clicking the backdrop. ript // Close modal when clicking backdrop (not content inside)

$('body').on('click', '.directorist-modal-js', function (e) {
	// Only close if clicking the backdrop itself, not children
	if (e.target === this && $(this).hasClass('directorist-show')) {
		$(this).removeClass('directorist-show');
		restoreModalToOriginalPosition(this);
	}
});

Changes:

• ✅ Added visibility check (hasClass('directorist-show'))
• ✅ Simplified selector logic
• ✅ Direct element reference instead of jQuery wrapper

Fixed

[RabbiIslamRony]

## 🐞 New Issues After Fixing Previous Ones

The previous issues have been fixed, but a few new issues have been identified.

---

### 1️⃣ Issue: Search Inputs Highlighted When Filter Modal Opens

**Description:**  
When clicking on **More Filter**, while the modal is opening, the search form inputs briefly get a white background highlight.

**Reference:**  
https://imgur.com/cRyJSb0

**Expected Behavior:**  
- Search form inputs should not get highlighted when the filter modal opens.

---

### 2️⃣ Issue: Filter Button Temporarily Disabled After Closing Modal

**Description:**  
After closing the filter modal, the **Filter** button remains disabled for about 1 second and cannot be clicked during this time.

**Reference:**  
https://imgur.com/ycrbfrv

**Expected Behavior:**  
- The Filter button should be clickable immediately after closing the modal.

---

### 3️⃣ Issue: Modal Position Changed Unexpectedly

**Description:**  
The modal position has changed and is now appearing in an unexpected position.

**Expected Behavior:**  
- The modal should maintain its intended and consistent position.

---

### Notes
- These issues appeared after fixing the previous blockers.
- Likely related to modal animation, focus handling, or temporary disabled state logic.

[iamibrahimriaz]

## 🐞 New Issues After Fixing Previous Ones

The previous issues have been fixed, but a few new issues have been identified.

---

### 1️⃣ Issue: Search Inputs Highlighted When Filter Modal Opens

**Description:**  
When clicking on **More Filter**, while the modal is opening, the search form inputs briefly get a white background highlight.

**Reference:**  
https://imgur.com/cRyJSb0

**Expected Behavior:**  
- Search form inputs should not get highlighted when the filter modal opens.

---

### 2️⃣ Issue: Filter Button Temporarily Disabled After Closing Modal

**Description:**  
After closing the filter modal, the **Filter** button remains disabled for about 1 second and cannot be clicked during this time.

**Reference:**  
https://imgur.com/ycrbfrv

**Expected Behavior:**  
- The Filter button should be clickable immediately after closing the modal.

---

### 3️⃣ Issue: Modal Position Changed Unexpectedly

**Description:**  
The modal position has changed and is now appearing in an unexpected position.

**Expected Behavior:**  
- The modal should maintain its intended and consistent position.

---

### Notes
- These issues appeared after fixing the previous blockers.
- Likely related to modal animation, focus handling, or temporary disabled state logic.

fixed

[RabbiIslamRony]

Using backdrop-filter directly on the body is not standards-compliant and breaks normal layout behavior.
To address this, we’ve applied the maximum possible safe fix to prevent layout issues—especially modal centering problems.
With this change, the PR looks good from my end.