![]() We define a ShowModal variable sent from the controller as a javascript variable, then we trigger the modal by checking the value of this variable.ĮDIT: We expect 'show' string as showModal variable from controller. If I understand you, this kind of approach might solve your problem. However as soon as I added a table to this modal to display a list of items, the table shows without the button being clicked. I have the following in my _Layout.cshtml page: I have a bootstrap modal that pops-up on-click of a button. So it looks like I need to figure out where that's happening. I did just check the Chrome debug console and I am getting an error that seems to indicate I am loading jquery twice. I also added (although not shown here) a temporary call to alert("I'm here!") inside of the ShowModalDlg() function and the alert shows perfectly. The button I added to test "showing" the modal still works. The ShowModalDlg() function does get called when it is supposed to, but the bootstrap modal is not showing. Here's the new JavaScript function in my external file function ShowModalDlg() Here's my scripts section on the Razor page scripts ![]() ĮDIT: Added code to my scripts section at the bottom of the page and a new JavaScript function in an external. I can get the modal to display with a button, but that's not the functionality I am looking for. Below is a sample Bootrstap modal I found on the Bootstrap website. ![]() I've tried several different things and nothing is working. I'm new to ASP.NET Core and trying to figure out how to display a Bootrstap modal based on a string property of the underlying page Model (Model.Message). You can try using the following (Bootstrap 4 - in 3 use. If anything inside of that tree is relatively positioned, the z-index can no longer be compared effectively. modal-backdrop overlay sits in the root of the DOM tree while the other content is buried in a separate DOM node tree. If anything in that tree uses position: absolute or position:fixed - boom the problem shows up in modals. In the first example the tag is the Angular application's DOM root and everything rendered dynamically by Angular renders below it. If you can move your elements - great, but in dynamic applications rendered through a framework like Angular, it's likely you have a component rendering the modal, and you can't control where the element goes. This setup works because there's no top level container above the modal that introduces it's own positioning root. The easiest solution is to move the modal dialog outside of any container and just declare it under the element, or - remove any absolute, fixed or relative positioning. The problem occurs because the overlay and the other content container are not relative to each other so the position:absolute (or fixed) and their z-index values are not directly related to each other. The change post 3.34 of bootstrap was that the modal overlay was moved to the DOM root below while the actual modal dialog content in this case is sitting inside of a separate nested DOM structure. The above problem occurs when the Modal dialog sits within a container that has any parent that uses either fixed, absolute or relative positioning. The problem is that many modern applications use fixed, absolute and relative positioning to lay out their user interface. This problem seems to have arrived sometime around Bootstrap 3.33 - prior to that things seemed to work just fine but starting with 3.34 and later things started going south. I've repeatedly run into the following problem with Bootstrap's modal dialog where the dialog ends up showing underneath the modal background:
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |