Question

我的bootstrap模式显示在我的网站主页上显示内联的问题（AKA它不是隐形的，它显示在页面上）。我已经开源了这个项目，因此可以在这里查看：

这是一个奇怪的问题，当我向页面添加面板时突然弹出。

以下是我的模态代码：

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

该项目现已开源，因此您可以下载整个项目。您只需要知道如何设置OracleXE的实例，即学习者（免费）版本。项目本身是报告引擎的一种形式，不同之处在于用户实际上必须浏览它才能获得报告。

Answer 1

如果我错了，请纠正我，但我实际上并没有看到你将模态隐藏在默认位置。据我所知，默认情况下不会隐藏模态。对于HTML编译器，您只是制作一个在页面加载时向用户显示的常规模式。

类似的东西：

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

或

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

咏叹调隐藏的意思是： ARIA（可访问的富Internet应用程序）定义了一种使残障人士更容易访问Web内容和Web应用程序的方法。

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

然后用jquery显示模态

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

如果我错了，请告诉我你正在隐藏模态。或者，如果有更好的方法来隐藏和显示模态。我也在学习。

Answer 2

必须在某个时刻调用$('#excelModal').modal()，以便将其转换为模态的逻辑触发。

你需要传递一个隐藏模态的选项，直到你通过某个事件显示它：

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

页面上的Bootstrap模式显示，不隐藏

2 个答案: