Bootstrap modal displays on page, not hidden

Question

I am having a problem with my bootstrap modal displaying inline with the html on the homepage of my site(AKA it is not invisible, it shows on the page). I have open sourced this project, so it is available here to view:

AdHoc Reporting Engine

This is a weird problem which suddenly popped up when I added panels to the page.

The following is my modal's code:

        <!-- Placing excel upload modal here... -->
    @using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "form-horizontal" })) {
        <div class="modal fade" id="excelModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Excel Upload</h4>
                    </div>
                    <div class="modal-body">
                        <p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
                    </div>
                    <div class="modal-footer">

                        <div>
                            <div class="form-group">
                                @Html.Label("Excel File:", new { @class = "control-label col-md-2" })
                                <div class="col-md-10">
                                    <input id="excelFile"
                                           name="excelFile"
                                           type="file" />
                                    <button class="btn btn-primary"
                                            type="button"
                                            ng-click="ExcelUpload()">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </div>

                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    }

The project is now open sourced, so you can download the whole thing. You will just have to know how to set up an instance of OracleXE, the learner's (free) edition. The project itself is a form of reporting engine, difference being that the user actually has to browse out to it in order to get their report.

Well, if it's not hidden, it means the style is not being applied for some reason. Have you made sure the call to `$('#excelModal').modal()` executes when the DOM is ready? — JuanR, Jan 08 '18 at 20:58
Are you missing the bootstrap css reference? Something wrong with your style bundling maybe? Alternatively, you might be accidentally overriding its styling somewhere or setting its style in javascript? — Adam Brown, Jan 08 '18 at 21:12
I am trying to set the $('#excelModal').modal() method, but it typically wants to display the modal when I do that. I tried to set both in the HomeController.js file (angular) (in the scripts folder) and using a jquery document.ready function on the actual page. I don't understand why this doesn't work. As for the CSS reference, I believe it is ok, the page is getting the paneling and buttons correct. I put the bootstrap requirement in the _Layout.cshtml page in the header. @Scripts.Render("~/bundles/bootstrap"). — Cameron Block, Jan 08 '18 at 21:39
I tried copying your code into the example at https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h and it worked fine. I think it is most likely that you are either missing a reference, have overridden a style or have some other issue in your html, maybe an unclosed div. There doesn't seem to be anything wrong with what you've posted. — SBFrancies, Jan 08 '18 at 22:27

score 1 · Answer 1 · answered Jan 08 '18 at 22:39

1

You must call $('#excelModal').modal() at some point so the logic to turn it into a modal fires.

You just need to pass it an option to hide the modal until you show it via some event:

$('#excelModal').modal({
  show: false
})

answered Jan 08 '18 at 22:39

JuanR

7,405
1
19
30

score 0 · Answer 2 · answered Jan 08 '18 at 21:30

Correct me if I'm wrong but i'm not actually seeing where you hide the modal as default. It is my understanding that modals are not hidden by default. To the HTML compiler you are just making a regular modal that is shown to the user on page load.

Something like:

<div class="modal fade" id="excelModal" role="dialog" aria-hidden="true">

or

<div class="modal fade" id="excelModal" role="dialog" hidden="true">

aria-hidden means: ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.

per: What's the difference between HTML 'hidden' and 'aria-hidden' attributes?

And then to show the modal with jquery would be

$("#excelModal).modal('show')

Please let me know if I am wrong and you are hiding the modal. Or if there is a better way to hide and show modals. I'm learning too.

This sounds plausible, I added in a 'hide' class, I also tried using jquery on the page to use the .hide() method on the modal, I also tried to use the 'hidden' attribute which is actually declared like this; — Cameron Block, Jan 08 '18 at 22:15

Bootstrap modal displays on page, not hidden

2 Answers2