Display tabular information using a Bootstrap modal popup

I am facing formatting challenges while working with bootstrap. My goal is to display data in tabular form within a modal-body. Is this feasible? From what I have observed, modals can only be implemented using div tags.

http://getbootstrap.com/javascript/#modals

javascriptcssruby-on-railstwitter-bootstrap

Answer №1

Yes, tables can be used in modals!:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<div class="modal fade" id="myModal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      <table>
          <thead>
          </thead>
          <tbody class="table">
              <tr>
                  <td>1</td>
                  <td>2</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>4</td>
              </tr>
          </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer №2

Achieved success by relocating my modal content to the top of the HTML body.

Answer №3

Check out this example

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo version 2</title>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beccd1d1dadddadcdfecebf8b818d818582cdcadaec">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-dzeHe/Y-R7JvmGDRvuqKMVrP-OsBmVFBL6DPjrfPi5tjfHyaWutingFmAptvof" crossorigin="anonymous">
</head>

<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
            Create New Account
        </button>
    </div>
    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Account Form</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="account_id" class="col-form-label">Account ID:</label>
                            <input type="text" class="form-control" id="account_id">
                        </div>
                        <div class="mb-3">
                            <label for="username" class="col-form-label">Username:</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="mb-3">
                            <label for="password" class="col-form-label">Password:</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                         
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="276548484341514742714144c1253834353130">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-skzl2049JN3tlhbjs2QwFaBYz5/SUsLcltiwsAUY55Yfn8pRWdELyxKyxCxPW51nH2" crossorigin="anonymous"></script>
</body>

</html>

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

Activate the action using the onclick interaction

window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false); My current setup involves an event listener that responds to a mousewheelEvent by executing a function. However, when attempting to directly trigger this function on a separa ...

javascriptreactjsmouseevent

Execute a JavaScript function when an element loaded via Ajax in a Spring MVC framework triggers the onChange event

I currently have a dropdown list with two values and I am looking to enable or disable four components based on the user's selection. If the user picks the first value, the components should be enabled, otherwise they should be disabled. On the main ...

javascriptajaxjspspring-mvconchange

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

Angular JS: How to dynamically add and remove checkboxes in ng-repeat?

Currently, I have successfully implemented a Miller column using Angular and Bootstrap. To view the functionality in action, you can check out the code snippet at this link. In the second column of my setup, clicking on a word opens up the third column. ...

javascriptangularjscheckboxangularjs-ng-repeat

Is it possible to create a dropdown like this using CSS?

Planning to create a new webpage. The main feature will be a dropdown menu that I envision like this: Check out the design here: http://img694.imageshack.us/img694/9350/dropdown.png Wondering if it can be achieved purely with CSS, or would I have to reso ...

cssuser-interfacedrop-down-menu

Trouble with jQuery noConflict function not resolving as expected

I'm attempting to use both jQuery 1.4 and 2.0 by utilizing the noConflict function, but the code isn't working as expected. Here is an example of my document head: <script src="js/jquery-2.0.0.min.js" type="text/javascript"></script> ...

javascriptjqueryhtmlcss

The VueJS Chosen directive fails to refresh when new options are selected

Struggling to populate my jQuery Chosen dropdown field with AJAX data using VueJS. Unfortunately, when trying to update the values, the Chosen dropdown does not reflect the changes. I've experimented with different approaches, including manually trig ...

javascriptajaxvue.jsjquery-chosen

Creating a process to automatically generate an input field upon the selection of checkboxes

Is there a way to automatically generate a text field for each checked box in a dynamically changing checkbox list? Below is my code snippet: <div> <label> Products </label> <li ng-repeat="item in INDproducttypes"> ...

javascripthtmlangularjsangularjs-ng-repeat

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

Modify section background color for every iteration in an image carousel

Is it possible to dynamically change the background color of the cd-hero section each time a new image is loaded in a simple slider on the home page? Can this be achieved by storing predefined colors in an array so that different images trigger different b ...

javascriptjqueryhtmlcss

Difficulty triggering an event within a collection in Backbone.js

Having recently delved into JavaScript and Backbone, I encountered a puzzling error. Router = Backbone.Router.extend({ routes: { ":albumID": "load" }, load: function (albumID) { if (controller.collectionInitialized == true) ...

javascriptjquerybackbone.js

The resizing of iframes in Javascript is malfunctioning when it comes to cross-domain functionality

I have implemented a script to dynamically resize iframe height and width based on its content. <script language="JavaScript"> function autoResize(id){ var newheight; var newwidth; if(document.getElementById){ newheight=docume ...

javascriptjqueryiframecross-domain

The CSS code seems to be refusing to connect and cooperate with the Spring Boot application

https://i.sstatic.net/CUrYN.png This is an image of my current project. I have placed my css file in the static/css folder and I am attempting to connect it to my index.jsp page, but unfortunately, it is not functioning as expected. I have already tried ...

cssspringspring-boot

When the second history.push is triggered in react-router-dom, it may result in returning an

Hello, I am working with an Antd modal that contains a form. The code snippet for the modal is as follows: <Modal visible={visible} onOk={handleOk} onCancel={handleCancel}> <MyForm onSubmit={handleOpenUrl}> <CustomInput name= ...

javascriptreactjsreact-routerreact-router-dom

What is the best way to push a variable after employing the split function in JavaScript?

error: An unexpected TypeError occurred while trying to read property 'push'. The error was on this line: " this.name[i].push(arrayData[0]); " I'm confused because the console.log statement before that line shows "data is loaded:" alo ...

javascriptvue.jssplitpush

Is there a way to turn multiple lines of text into a tooltip label that appears when hovered over?

My goal is to have underlined text that spans multiple lines and reveals a tooltip when hovered over. I've managed to include multiple lines in the tooltips, but I'm struggling with applying the labels correctly. I am completely new to HTML; I r ...

htmlcsstooltipmultiline

"Connecting a checkbox and radio button to a button for page navigation using JavaScript - a step-by-step guide

How can I link a checkbox and a radio button with a button to open a page using JavaScript? For instance: Select a checkbox and a radio button, then click a button to open a page. This concept caters to everyone: Select a checkbox and a radio button, then ...

javascript

Performing a AJAX POST call to the latest Google Analytics V4 API

Recently, the Google Analytics v4 API was updated and now requires POST requests instead of GET requests. Unfortunately, there are not many examples available yet... I managed to obtain the accessToken, but when I attempt the following POST request, I alw ...

javascriptjqueryajaxpostgoogle-analytics-api

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

javascripthtmlgoogle-chrome

Create a new element by cloning the React component as an SVG named SomeSVG

I have a scenario where I am receiving an SVG as a prop in my child component. Once I receive it, I would like to manipulate it by adding some additional properties like this: {React.cloneElement(ReactSVGasProp, { className: class })} However, when I atte ...

javascriptreactjs