I have a bootstrap view which I am trying to get a modal working for. Unfortunately the modal is displaying as part of the page, not invisable. So it is displaying with it's content as part of the page. Here is my 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>
        }

I Just added some panneling, but was wondering if you could find any issues with it. Thanks.

I actually have decided to open source my project. Here is the link:
Click Here
If anybody has any idea why the modal is not working please post back.

This topic is no longer necessary, I figured out how to do it with UI bootstrap, a seperate thread. Resultant html looks vastly different.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.