Question

我当前正在尝试使用Bootstrap中的Modal对话框。我已经按照教程显示的进行了操作，但是只要单击按钮，模态对话框就不会显示。我可以知道为什么吗？

这是我的代码

<body>
    <form runat="server">
            <asp:ImageButton runat="server"  ImageUrl="image.url" data-toggle="modal" data-target="#login" />

            <div class="modal" id="login" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <label>Login</label>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label>EmAIL-iD</label>
                                    <input type="text" placeholder="Email-Id" id="email" />
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button value="Login" id="login"></button>
                        </div>
                    </div>
                </div>
            </div>

</form>
</body>

<script type="text/javascript" src="Scripts/bootstrap.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

Bootstrap取决于已经加载的jQuery，因此应在bootstrap.js文件之前将其导入。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>

如果这是您的问题，则会在浏览器控制台中看到jQuery is not defined错误。

Answer 2

您正在使用服务器端控件（asp：ImageButton）。所以回发将会发生。

使用按钮控件

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Open Modal</button>

Answer 3

可能有一些原因。

首先，您有嵌套的表单。将外部的一个更改为div：

<div runat="server">

第二，id为login的元素有2个：

<div class="modal" id="login" tabindex="-1">
<button value="Login" id="login"></button>

将按钮的ID更改为其他内容。

如果在完成这些更正后仍然失败，请在浏览器（F12）中打开开发人员工具，然后查看控制台中是否存在错误（也许无法访问jquery lib）。

Answer 4

创建一个以图像为背景的css类，并将该类添加到按钮。

                <style>
                .bgButton{
                font-size: 18px;
                border: 2px solid #AD235E;
                border-radius: 100px;
                width: 150px;
                height: 150px; background-image: url(images/Sun.jpg);
                }
                </style>  
                <button type="button" class="btn btn-info btn-lg bgButton" data-toggle="modal" data-target="#login"></button>

ASP.NET Web中未显示模式对话框

4 个答案: