引导模式显示在页面上，未隐藏

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.

Answer 1

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.

Answer 2

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
})