fw.soleModal z-index override places it behind fw.OptionsModal

[danyj]

I have fw.OptionsModal open , if info i one of the inputs is incorrect I am calling
fw.soleModal to display the error, but it's z-index is lower than z-index from fw.OptionsModal so it ends-up being displayed behind the modal box. Seems like there is additional CSS override for it , see this ,

http://prntscr.com/6gakio

the fw.OptionsModal is media-modal-backdrop and has z-index of 160001
fw.soleModal original of 170001 would have worked fine but the override of 10000 kills it.

[danyj]

And I am not sure if this param should display soleModal ID

Unyson/framework/static/js/fw.js

Line 1187 in 1b9cd4d

* fw.soleModal.show('unique-id', 'Hello World!');

but it does not in my case

fw.soleModal.show( 'thz_style_exists',modal_html,{
        autoHide: 5000,
        allowClose: true
    }
);

[ghost]

but it does not

Look in page footer, if the modal is there, then the required styles are not enqueued, try to run on that page (php) wp_enqueue_media();.

[danyj]

all styles are there and the page is theme options , fw.css is loaded

https://github.com/ThemeFuse/Unyson/search?utf8=%E2%9C%93&q=fw-sole-modal

[ghost]

wp_enqueue_media(); has styles for .media-modal

[danyj]

I tried

add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );

and

 wp_enqueue_media();

in hooks.php
and see no change. Are you talking about the ID being displayed or the CSS z-index bug?

[ghost]

Are you talking about the ID being displayed or the CSS z-index bug?

About the ID being displayed. CSS z-index bug will be investigated later.

[danyj]

Ah ok , well that did not work http://prntscr.com/6gb7oj

[ghost]

I executed the code below in my browser console and the modal was opened

fw.soleModal.show( 'thz_style_exists', 'Hello', {
        autoHide: 5000,
        allowClose: true
    }
);

[danyj]

about ID , I dont need it specifically now , just wanted to give you heads up.
Not even your saving solo modal has it and I see that you did place it

Unyson/framework/static/js/fw.js

Line 1187 in 1b9cd4d

* fw.soleModal.show('unique-id', 'Hello World!');

Modal opens just fine, I thought that this

Unyson/framework/static/js/fw.js

Line 1187 in 1b9cd4d

* fw.soleModal.show('unique-id', 'Hello World!');

should place an attribute ID here http://prntscr.com/6gb9hf

[danyj]

For Z-index bug test this in console

var modal = new fw.OptionsModal({
title: 'Custom Title',
options: [
   {'test1': {
       'type': 'text',
       'label': 'Test1'
   }},
   {'test2': {
       'type': 'textarea',
       'label': 'Test2'
   }}
],
values: {
   'test1': 'Default1',
   'test2': 'Default2'
}
});

modal.open();
fw.soleModal.show('unique-id', 'Hello World!');

[ghost]

That id is used to prevent the same modal being open multiple times. For e.g. currently a modal is open (for 5 seconds), in that time, another script is calling fw.soleModal.show() multiple times, if there were no id, after the first modal will be closed, the same modal will be open again and again after you click close. Now when you call multiple times, the previous call is replaced, and every time in queue there is only one modal with that id.

Why do you need the id to be added in html?

[danyj]

yes I just tested and is used as handle not as attribute ID,
I see that no ID attribute is used here,

Unyson/framework/static/js/fw.js

Line 1224 in 1b9cd4d

'<div class="fw-modal fw-sole-modal" style="display:none;">'+

I dont need it , just thought it does places and ID attribue, when I ran in to z-index bug I wanted to catch only my modal by ID an give it higher index , thus the question.

[danyj]

So that I can continue the work , I did this until bug is fixed

.fw-sole-modal .media-modal{
    z-index:500000;
}

[ghost]

Yes, I think this is the solution, but I will see later.