Calling a function on bootstrap modal open - js additional code

Question

its not dublicated question because I didnt understand the smilar question's answer.may I can delete after solved my question, if the answer so easy.

When bootstrap 3 modal is opened, my mega menu appear upon it.to solve this, while bootstrap modals are opened, I must reduce z-index of mega menu.mega menu's z-index is maximum now for all time.

I found this question:

Calling a function on bootstrap modal open

it says:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

for bootstap 3.

how can I write this code with jquery or javasicript?

edit: to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery.

https://resimli.yedek.deniz-tasarim.site/

website is this.

bootstrap modals open with sign up/login buttons on header. ( top-right )

I am foreign to bootstap 3 and there are many classes for modals.So, it confused me.

Your question is not clear. Can you specifically explain what exactly you want to achieve ?! — s.kuznetsov, Nov 24 '20 at 12:28
@sergeykuznetsov I editted question.in spesfical perspective, " to give specific request, I want to determine bootstrap class to use it instead of #code word and then, write changing z-index value of a spesific class via jquery. " — Faruk rıza, Nov 24 '20 at 12:44
Now I understand your problem. Write the name of the modal (class or id). I know how to adjust the z-index in jquery. — s.kuznetsov, Nov 26 '20 at 10:26
Are you getting an alert message for this code? - `$('#signin').on('shown.bs.modal', function (e) { window.alert("eski uyarı"); });` — s.kuznetsov, Nov 26 '20 at 10:35
@sergeykuznetsov I think this question also need bootstrap 3 js information because it doesnt work.probably I putted signin id to wrong place in php code.I converted html code to wordpress theme but my bootstrap info is weak — Faruk rıza, Nov 26 '20 at 10:40
The mega menu has the maximum index by default, and it seems to me not entirely correct. Now I will give you a solution. — s.kuznetsov, Nov 26 '20 at 10:46

score 0 · Accepted Answer · answered Nov 26 '20 at 10:55

Your menu overlaps the modal due to the default maximum z-index.

Here's what the css rules for the menu look like now:

#wp-megamenu-header-menu {
    z-index: 9999; <=== /*the problem is here*/
    text-align: left;
    height: 90px;
    background-color: #fff;
    padding-top: 20px;
    padding-right: -20px;
    padding-bottom: 40px;
    padding-left: 0;
}

And this is most likely written by you:

.wp-megamenu-wrap {
    z-index: 99999;
}

To solve this problem, it is sufficient to override the z-index with the !important rule. Insert this rule into your css:

#wp-megamenu-header-menu {
    z-index: 1000!important;
}

And your overlap problem will go away!

Calling a function on bootstrap modal open - js additional code

1 Answers1