BootStrap modal behind backdrop, please help :( cant get it working....

Using bootstrap version 3.3.6 and nop 3.70 and code from the download sample here https://www.youtube.com/watch?v=0OMj99PU8YY (Advanced plugin tutorial Part 3)

My issue is that my modal dialog will not pop up correctly and stays behind the backdrop and other page elements. ived tried the z-order stlle attribute which is a common fix with no joy and i can not move the modal after the </body> tag as the modal is in a partial view. the sample above just works so i have no clue what im doing wrong ?


i hope some one can help me...

Id post my code but the furum seams to break by asking for a CATCHA re-sets the form with out submitting the post. but its exactly the same as the video above , i've checked it 50 times at least

nexusloq wrote:

Hi There,

The problem is somewhere up in the elements hierarchy and it's related to 'z-index' property. You need to find the outer wrapper of the popup and compare his 'z-index' with all the elements on the same level in the markup.
I can be more specific but for this purpose, you need to send me back a link with live site instead of video.

Hi thanks for the reply, for completeness I managed to get a fix, not sure whats causing the root cause , my instillation of nop is clean and my plugin is as the tutorial videos online. my only conclusion is versions (i'm using the current latest of everything).

Basically i covered every version of z-index to get the Modal to display. as per the forums the real issue is placement of the model within elements

so my fix (hack or what ever anyone wants to call it is the following code script)

this sits at the end of my partial view.

    $(function () {
        $("#myModal").appendTo("body");
    });
  


the code basically looks for the modal and shifts it to after the body tag (as per the correct way to fix).

It seams to work as my model is now visible and editable etc.

Hopefully this may be of use to others who may encounter the issue.

Thanks for looking.

Same problem here. solution above makes sense because according to this http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background, placing the modal just before the closing </body> tag should solve this problem.. And it does!

Thanks for this thread, I had the same problem and fixed it with the following script in my view.

<script type="text/javascript">
    $(document).ready(function () {


        $("#myModal").appendTo("body");


        });
</script>