CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapmodal-dialog
super-user
super-user

Reputation: 1057

Bootstrap Modal MVC Partial View Data-Backdrop Issue

I am having an issue with Bootstrap Modal, you know when we call a modal, the page where we called it is disabled (it turns gray) and you can only type/click on the modal right? On my part though, both the main page and the modal is disabled so I can't click nor close my modal after I called it. I can fix it by making the data-backdrop property to false but that removes the effect both on my modal and the page.

Default Modal: enter image description here


data-backdrop = "false" enter image description here

I think the reason for this is because the content of my modal is a partial view, and the modal is called from a partial view also. To help you imagine: I have 3 pages
1. Index.cshtml(main page)
2. SearchResult.cshtml (partial view)
3. Edit.cshtl (partial view)

Index is where my search criteria bar, when Go is clicked, SearchResult partial view is called at the center of the page, then when I click edit, the modal popup.

My assumption is that the backdrop also disables my SearchResult so my whole page become disabled. I am not really sure though. I hope you can help me figure this out. Thank you!

Upvotes: 1

Views: 2231

Answers (2)

mcrsftDev
mcrsftDev

Reputation: 3

I put this code on my document ready , to catch when that element is adding to the page and I remove his css attribute position to relative: 

 $('body').on('DOMNodeInserted', '.modal-backdrop', function () {
           
            $(this).css('position','relative');
        });

Upvotes: 0

Devined
Devined

Reputation: 186

Do you have an example of your code? I am guessing without looking that your div that you are populating with the modal content is inside the div(s) with the rest of your page content. If this is the case, try moving the modal div out of any nested tags so that it stands on its own.

I.E.

`<div id="PageContent"></div>

<div id="ModalContent"></div>`

Upvotes: 2

Related Questions