Issues Encountered with Bootstrap Modal Form Code

ASP.NET

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="#loginModal" />

<div class="container">
    <div class = "row">
        <div class="modal fade" tabindex="-1" id="loginModal"
        data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">Login</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="inputUserName">Username</label>
                            <input class="form-control" placeholder="Login Username"
                                    type="text" id="inputUserName" />
                        </div>
                        <div class="form-group">
                            <label for="inputPassword">Password</label>
                            <input class="form-control" placeholder="Login Password"
                                    type="password" id="inputPassword" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Login</button>
                    <button type="button" class="btn btn-primary"
                            data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

The code above seems to be causing issues for me.

Answer №1

To modify the button, you should include data-toggle="modal" and data-target="#loginModal". Also, adjust the OnClientClick value to "return false" to prevent the page from reloading due to postback.

<asp:Button ID="Button1" runat="server" Text="Button" data-toggle="modal" data-target="#loginModal" OnClientClick="return false" />

For more information on Bootstrap Modals (even though the documentation features a standard button)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with CSS styling on a content slider causing the last picture to display incorrectly

I recently updated a Content Slider and tweaked the styles to my preference. Check out the changes I made on this link. In addition, I included an extra Thumbnail Picture on the right (7th one) along with the Main Picture. Oddly enough, the Slider seems ...

Hover over the text only, not the entire row

Is there a way to create a mouse hover effect on text only, without affecting the entire row? I attempted using Position(), but didn't have success. Here is a link to the fiddle I created: <ul id='ulid'> <li>Task1</li> < ...

Firebase issue: The function ref.once is throwing an Uncaught TypeError and is not recognized

I am attempting to utilize Firebase for both uploading a file and storing it in my database simultaneously. I want to track the number of uploads so that I can rename each file uniquely. While I have successfully uploaded and stored a copy in the database, ...

Tips for including background pictures in the jumbotron using bootstrap

I've recently delved into bootstrap just a couple of days ago. Now, I'm encountering an issue where I can't seem to add a background image to my entire webpage or even the jumbotron specifically. I've attempted to directly input the pa ...

Tips for managing a session when adding a List of strings

((List<string>)Session["answera"]).Add(xle.InnerText); I am encountering an issue while trying to execute this operation, it keeps showing "Object reference not set to an instance of...." I prefer not to use List<string> ast = new List<s ...

Changing the selection in the Angular Mat-Select dropdown causes the dropdown's position to shift

Issue with dropdown position: The dropdown should display below the select element, but when selecting the second value, it appears on top of the select element. I have removed any relevant CSS to troubleshoot, but the problem persists. See screenshots for ...

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

The issue with EJS Header and Footer not showing up on the

I am currently building a basic todo list application using EJS. However, I am encountering an issue when running it. I would like to run app.js with the header and footer in EJS, but it seems that it is not recognizing the header despite using what I beli ...

Making sure your cover image looks great on high density displays with responsive design

I am facing a significant issue that I have not been able to find a solution for yet, so I'm hoping you might be able to help. My work involves creating websites, and I am in need of making the cover background image responsive (covering the entire p ...

Opacity property not functioning properly in Internet Explorer 8

There seems to be an issue with adjusting the background opacity. style.css .divOpacity1 { position: absolute; z-index: 1; height: 2000px; width: 100%; background-color: #FFFFFF; top: 2px; left: 0px; opacity: 0.6; ...

Ensure that the header logo is in perfect alignment with the body of the

I am facing an issue with the alignment of my header logo on a webpage. The body of the page has white space on each side, and I want the header logo to be aligned on the left so that it starts vertically at the same point as the body regardless of the win ...

Overriding the !important declaration in inline styles within various CSS IDs and classes

I need to find a way to override an inline !important declaration that is nested inside multiple CSS ids and classes. Let's analyze the following situation: <div class="A"> <div class="B"> <div class="C"> < ...

Finding the name of the file from a given path

There is a string value in the format of /Images/She.jpg. How can I extract and retrieve only the portion following /images/, specifically She.jpg? What would be the best method to accomplish this task? ...

What is the best way to expand the header, content, and footer colors to cover the entire width of a page while keeping everything centered within a fixed width

I managed to get the header and main content area to stretch across the full page, while keeping the content centered. But now I am facing an issue with the footer not stretching like the header. How can I make the footer stretch as well? HTML: <body ...

Adding user settings in ASP MVC4 Admin control panel

As I dive into the administrative side of things using the Web Site Administration Tool for a new project, I encountered an issue. I set up an admin role in the backend to access a view through a controller filter, which seemed pretty standard. But when I ...

Display an alert message through jQuery script if the input type file is not an image

When working with an input type file, if an image is selected it will show a preview. If something other than an image, like a PDF or DOCX file, is selected I want to show an alert as invalid. However, I am encountering an error: Cannot read property &apos ...

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

Seeking Assistance! I am currently in the process of developing a node file that displays data from MySQL on an HTML page with a search bar. My issue is that sometimes when I run the code, enter something into the search bar and hit the button, it works s ...

How to remove an event listener when e.target points to a hyperlink

element, I encountered an issue using a slideshow component sourced from our components library. This component receives swipe events from a utility function that is initialized upon mounting. The problem arose while testing on a mobile phone - tapping a ...

What is the best way to organize my defaultdict for optimal structure?

I have a defaultdict within my views.py file that looks like this: defaultdict(<class 'list'>, {'List of tubes': ['2324', '98', '7654', 'List of auto:': [147, 10048, 1009, 10050, 10, 1647, 1 ...

Memory usage in the VS development server is elevated during postback

In my current MVC application, I have noticed that the memory used by the development server increases with each postback, eventually reaching about 100MB after approximately 50 postbacks. Is this a common issue with development servers and web applicatio ...