Modal Dialog Box not showing in ASP.NET web

debugcn Published at Dev

Arane

I am currently trying to use Modal Dialog box from Bootstrap. I have did exactly what the tutorial shows but whenever I click on my button, the Modal Dialog does not show. May I know why?

Here's my code

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

AndyM

Bootstrap depends on jQuery already being loaded so it should be imported before the bootstrap.js file.

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

If that is your issue you'll be seeing a jQuery is not defined error in the browser console.

Collected from the Internet

Please contact [email protected] to delete if infringement.