I'm having trouble getting my modal to work and display properly; I need to send it to the code behind for further assistance

I'm having trouble with my modal. I'm trying to create a sign-up modal and send it to my code behind page. I've incorporated bootstrap lumen and jquery, but I could use some assistance. Any help would be greatly appreciated. Thank you in advance.

Additionally, I need to design a form and implement an ajax call for it.

https://i.sstatic.net/UBr5U.png

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>
<!DOCTYPE html>
<link href="../css/bootstrap.css" rel="stylesheet" />
<script src="../js/bootstrap.js"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<script src="../js/bootstrap.min.js"></script>
<link href="../css/custom1.css" rel="stylesheet" />
<script src="../js/jquery-3.3.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="form_bg">
                <form>
                    <h2 class="text-center">Login Page</h2>
                    <br />
                    <div class="form-group">
                        <input type="email" class="form-control" id="userid" placeholder="User id">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="pwd" placeholder="Password">
                    </div>
                    <br />
                    <div class="align-center">
                        <button type="submit" class="btn btn-default" id="login">Login</button>
                    </div>
                    <br />
                    <button class="btn btn-success" data-toggle="modal" data-target="#mymodal">Launch Modal </button>
                    <div class="modal">
                        <div class="modal-dialog" role="document" id="mymodal">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <p>Modal body text goes here.</p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
            </div>
        </div>
</body>
</html>
htmlcssasp.netbootstrap-modal

Answer №1

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="HotelReservation.Views.Login" %>    
<!DOCTYPE html>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="../css/custom1.css" rel="stylesheet" />

    <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
        <title></title>
      </head>

      <body>
<div class="container">
          <div class="row">
            <div class="form_bg">
              <form>
                <h2 class="text-center">Login Area</h2>
                <br />
                <div class="form-group">
                  <input
                    type="email"
                    class="form-control"
                    id="userid"
                    placeholder="Username"
                  />
                </div>
                <div class="form-group">
                  <input
                    type="password"
                    class="form-control"
                    id="pwd"
                    placeholder="Password"
                  />
                </div>
                <br />
                <div class="align-center">
                  <button type="submit" class="btn btn-default" id="login">
                    Sign In
                  </button>
                </div>
                <br />
                <div
                  class="btn btn-success"
                  data-toggle="modal"
                  data-target="#mymodal"
                >
                  Launch Secure Modal
                </div>
                <div class="modal">
                  <div class="modal-dialog" role="document" id="mymodal">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Modal Dialog</h5>
                        <button
                          type="button"
                          class="close"
                          data-dismiss="modal"
                          aria-label="Close"
                        >
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <p>Custom modal body goes here.</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-primary">
                          Save Changes
                        </button>
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-dismiss="modal"
                        >
                          Close Window
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>

Answer №2

insert this script into the head section

 <script type="text/javascript>
    function DisplayPopup() {
        $("#btnShowPopup").click();
    }
</script>

Now, include this code in the body

<button type="button" class="btn btn-info btn-lg" id="btnShowPopup" style="display:none" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <asp:Button ID="Button1" runat="server" CssClass="btn btn-success" style="padding:5px;font-size:14px;" OnClick="Button1_Click" Text="View Contact" />
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" style="color:#00ca4c;">Lead Details</h4>
        </div>
        <div class="modal-body">
            <div class="col-md-12">

            </div>
        </div>
        <div class="modal-footer" style="padding-right:15px;">
           <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

and add this in your code behind

   protected void Button1_Click(object sender, CommandEventArgs e) {
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "DisplayPopup();", true);
}

within the button click event where you want to trigger the modal popup

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

How can I create clickable table entries using php and html?

I want to create a table on this page that is clickable. When the user clicks on a row, the data from that row will be sent to a PHP file with a form prepopulated with the selected user's information for updating purposes. <!DOCTYPE html> &l ...

javascriptphphtmlmysql

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Implementation demonstration / library for complete URL encoding

Currently, I am developing a Java application that extracts links from HTML and utilizes them to request their content. One particularly challenging area is URL encoding when the intent of the URL author is unknown. Determining whether to use %20 or + can ...

javahtmlhttpparsingbrowser

Customizing the tab content background color in MaterializeCSS

I've been struggling to customize the background color of my MaterializeCSS tabs content by referring to their official documentation: If you visit the website, you'll notice that the default tabs have a white background, while the 'Test 1& ...

cssmaterialize

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

In Vue, it is not accurate to measure overflow

I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...

javascripthtmlcssvue.js

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

npm version 7.5.4 has been detected, but the Angular CLI currently requires npm version 6 to function properly due to ongoing issues. To proceed, please install a compatible version by running this command: npm install --global npm@6. For more information ...

javascripthtmlnode.jsangularnpm

ng-repeat is not functioning properly despite the presence of data

Currently, I am in the process of building a basic Website using the MEAN stack, but I'm facing an issue with an ng-repeat that is failing to display any content. Oddly enough, when I attempt something similar in another project, it works perfectly fi ...

javascripthtmlangularjs

Can CSS be used to create curved dashed lines?

Is it possible to achieve dashed lines similar to the ones highlighted in the images below using only CSS? I have a responsive web page built with Bootstrap, and I need the dashed lines to adjust accordingly when the window width changes. https://i.sstat ...

javascripthtmlcsstwitter-bootstrap

Issues occur with Google visualization when the screen is resized

When I resize the browser, an error code google-visualization-errors-8 appears in my Google chart's CSS. https://i.stack.imgur.com/4LX1C.png What could be causing this error to occur? Note: I am redrawing the graph every time the screen is resized. ...

htmlcsschartsgoogle-visualization

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

pythonhtmlseleniumwebnetworking

Spin and flip user-submitted images with the power of HTML5 canvas!

I am currently working on a profile upload system where we are implementing image rotation using the HTML5 canvas object with JavaScript. Although the uploaded image is rotating, we are facing issues where parts of the image are being cut off randomly. So ...

javascriptjqueryhtmlhtml5-canvas

Determine the total number of active links on an HTML webpage using F#

Currently, I am working on developing a basic F# function that will be able to count the total number of links present in a given HTML website URL. I understand that this can potentially be achieved by counting the occurrences of the "<a" substrings, b ...

htmlwebweb-scrapingf#substring

ASP.NET ZERO - Troubleshooting Datatables issues

After upgrading my ASPNETZERO solution to the latest versions of V4.x, I encountered issues with DataTables plugin. I had previously implemented DataTables across all my code in the existing version of ASPNETZERO. However, it seems that ASPNETZERO has intr ...

c#asp.netdatatableaspnetboilerplate

Click on the print icon in the modal window

I have been working on a receipt generator for a client. The client can add payment receipts using the "Add" button, and upon submission, they have the option to convert it to PDF or print it. However, there seems to be an issue with printing as the text f ...

javascriptphpjquerycss

Navigating to the left while implementing right-to-left formatting on a single webpage

I'm currently working on a website and I decided to make it right-to-left (RTL). Everything looks good on the website, except for one specific page. I'm experiencing some difficulties in implementing RTL on this particular page. Although the ot ...

csswordpresswordpress-themingoverflowright-to-left

Download personalized HTML design

Situation When exporting to HTML, the resulting code appears as follows: <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <style type="text/css" ...

htmljasper-reportsexport

Development of an Angular 4 application utilizing a bespoke HTML theme

I'm in the process of creating an Angular 4 project using Angular CLI and I need to incorporate a custom HTML theme. The theme includes CSS files, JS files, and font files. Where should I place all of these files? Should they go in the asset folder? O ...

javascriptcssangularthemes

Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference: This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :) HTML <section class="container ...

htmlcssheighttwitter-bootstrap-3css-tables

``The background color will dynamically change according to the result of a function

My function named shift_color generates different color codes like "#FF5F74", "#5FFF66", and "#5F8AFF". I am looking to use this output to style a navigation menu background. I have tried the following code: .topnav { background-color: <?php echo shi ...

javascriptphpjqueryhtmlcss