CODEWITHSUNDEEP
c#jqueryasp.netbootstrap-modal
Arane
Arane

Reputation: 323

Modal Dialog Box not showing in ASP.NET web

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>

Upvotes: 0

Views: 2754

Answers (4)

Serosh k Vikraman
Serosh k Vikraman

Reputation: 36

Create a css class with image as background, and add this class to button. 

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

Upvotes: 0

AndyM
AndyM

Reputation: 1200

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.

Upvotes: 2

Matija Hrženjak
Matija Hrženjak

Reputation: 176

There could be a few reasons for this.

First, you have nested forms. Change the outer one to a div:

<div runat="server">

Secondly, there are 2 elements with the id login:

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

Change the id of the button to something different.

If it still fails after these corrections, open up developer tools in your browser (F12) and see if there are errors in the console (maybe the jquery lib could not be reached).

Upvotes: 0

Serosh k Vikraman
Serosh k Vikraman

Reputation: 36

You are using server side control(asp:ImageButton). SO postback will happen.

Use button control

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

Upvotes: 0

Related Questions