0

in my MVC action I have 

return PartialView("partialView", model);

I have this in the parent View:

    <div id="myModal" class="modal fade in">
        <div id="modalContainer">

        </div>
    </div>

And the body of the modal in the partial View.

I used this as a template: Using Bootstrap Modal window as PartialView

The modal loads fine with the right data on submit of the page. The problem is that the partial view with the modal covers the entire parent view instead of just showing the modal.

There's essentially the modal with a blank white screen.

My question is how would I only show the modal with data, and prevent the partial view from covering the whole page?

Thanks a million!

Community
  • 1
  • 1
B. Krinsky
  • 81
  • 4
  • 14

1 Answers1

0

My question is how would I only show the modal with data, and prevent the partial view from covering the whole page?

I would try rendering the modal without data to start. First and foremost make sure your modal appears and has some content in to start. Something simple like 'loading data...' or anything in your starting Modal Html will assist in rendering data. Once you connect to your Controller code you will be able to walk the code after "return partial view" and you should NOT step into your _Layout code.

Once you add your partial view, do yourself a favor and wrap it with a cascading style sheet (CSS) class that makes it very obvious that the style is working. Something as simple this should help.

<style type='text/css'>
    .wrapper{
    border:solid 1px red;
    }
</style>

<div id="myModal" class="modal fade in">
        <div id="modalContainer" class='wrapper">

        </div>
    </div>
  • styling is working. Thanks for the tip. To reiterate, I need to know how to stop the partial view from the covering the entire parent view and just show the modal. – B. Krinsky Aug 05 '16 at 15:58
  • There are styles that prevent "overflow". There are also styles that apply "scroll". Are you looking for CSS to do so? If so try adding some style to wrapper. overflow:scroll;. Let me know if this helps. Modal by design are a 'call to action' which indeed 'covers' the 'page'. –  Aug 05 '16 at 17:18
  • When it comes to bootstrap modals, they cover 'part of' the page, but you are still able to see the content around them on the main screen. My modal shows up, and doesn't take up the whole screen, but somehow the partial view that the modal is loaded into fills the whole screen blocking the parent view. I'd like to be able to see the parent view under or behind the modal which is the normal behavior. I don't believe I should have to do any CSS to achieve that, but I'll try the overflow. – B. Krinsky Aug 05 '16 at 18:10
  • aha. put your modal html at the end of your "layout" or "masterpage", before

    . my gut feeling is your css is conflicting or could have a bad closing tag. hth

     –  Aug 05 '16 at 18:13