Brave Search

Bootstrap modal not popping up when button is pressed

stackoverflow.com › questions › 71583015 › bootstrap-modal-not-popping-up-when-button-is-pressed

You are using bootstrap 5 so use data-bs-toggle instead of data-toggle and use data-bs-target instead of data-target

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                </button>

Ref:https://getbootstrap.com/docs/5.1/components/modal/

Answer from John Lobo on Stack Overflow

Bootstrap

getbootstrap.com › docs › 5.3 › components › modal

Modal · Bootstrap v5.3

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Bootstrap

getbootstrap.com › docs › 4.1 › components › modal

Modal · Bootstrap

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Videos

youtube.com

Bootstrap 5 Crash Course Tutorial #16 - Modals

10:02

YouTube

Modal Form in Bootstrap 5 - YouTube

Show Modal on Page Load Bootstrap 5 - YouTube

November 23, 2022

32:09

YouTube

Build A Custom Modal With Bootstrap 5 - YouTube

February 8, 2022

youtube.com

Create Stunning & Responsive Modal With Bootstrap

04:10

YouTube

Call modal manually with vanilla JavaScript in Bootstrap 5 - YouTube

getbootstrap.com › docs › 5.0 › components › modal

Modal · Bootstrap v5.0

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

W3Schools

w3schools.com › bootstrap › bootstrap_modal.asp

Bootstrap Modals

Some text in the modal. ... Tip: Plugins can be included individually (using Bootstrap's individual "modal.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js").

React Bootstrap

react-bootstrap.netlify.app › modals

Modals | React Bootstrap

You can focus on an element inside the modal using autoFocus attribute on the element. ... You can specify a Bootstrap large or small modal by using the size prop.

BootstrapVue

bootstrap-vue.org › docs › components › modal

Modal | Components | BootstrapVue

You can set the value of trigger by passing an argument to the component's hide() method for advanced control (i.e. detecting what button or action triggered the modal to hide). Note: ok, cancel, or close events will be only emitted when the argument to hide() is strictly 'ok', 'cancel', or 'headerclose' respectively. The argument passed to hide() will be placed into the trigger property of the event object. Utilize the Bootstrap grid system within a modal by nesting <b-container fluid> within the modal-body.

Bootstrap

getbootstrap.com › docs › 4.6 › components › modal

Modal · Bootstrap v4.6

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Find elsewhere

Google Bing Mojeek

Medium

medium.com › @AlexanderObregon › understanding-and-using-bootstrap-modals-effectively-14cf13cca2d9

Understanding and Using Bootstrap Modals Effectively

April 29, 2024 - Modals are essentially dialog boxes/popup windows that are displayed on top of the main content, to grab user attention and gather or deliver crucial information. They’re employed for various purposes, including log-in/sign-up forms, ...

W3Schools

w3schools.com › bootstrap4 › bootstrap_modal.asp

Bootstrap 4 Modals

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button>  <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content">  <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body"> Modal body..

Stack Overflow

stackoverflow.com › questions › 71583015 › bootstrap-modal-not-popping-up-when-button-is-pressed

Bootstrap modal not popping up when button is pressed

Top answer

1 of 4

You are using bootstrap 5 so use data-bs-toggle instead of data-toggle and use data-bs-target instead of data-target

  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                </button>

Ref:https://getbootstrap.com/docs/5.1/components/modal/

2 of 4

Fixed, Actually you miss the CSS and there is button attributes were wrong:-

Below example working fine...

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <title>Student List</title>


</head>

<body>


    <div class="container">
        <div class="row">
            <div class="col-8" id="pageName">
                <h1>Student List</h1>

            </div>
            <div class="col-4" id="newButton">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Launch demo modal
                  </button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                ...
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <hr>
    <table class="table">
        <thead class="thead-dark" id="tableHeader">
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Last Name</th>
                <th scope="col">First Name</th>
                <th scope="col">Course</th>
                <th scope="col">Average</th>
            </tr>
        </thead id="tableContent">
        <tbody>

        </tbody>
    </table>

    <script src="js/bootstrap.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
        crossorigin="anonymous"></script>

</body>

</html>

Bootstrap

getbootstrap.com › docs › 5.1 › components › modal

Modal · Bootstrap v5.1

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

CoreUI

coreui.io › react › documentation › components › modal

Bootstrap Modal - extended examples and tutorials

July 5, 2023 - Bootstrap modals are lightweight and multi-purpose popups. Modals are split into three primary sections: header, body, and footer. Each has its role and so should be used accordingly.

Stack Overflow

stackoverflow.com › questions › 16093568 › bootstrap-modal-not-displaying

Bootstrap modal not displaying - Stack Overflow

Top answer

1 of 16

530

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:

<script type="text/javascript">
    $(window).on('load', function() {
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

You can still call the modal within your page with by calling it with a link like so:

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

2 of 16

You don't need javascript to show modal

The simplest way is replace "hide" by "in"

class="modal fade hide"

class="modal fade in"

and you need add onclick = "$('.modal').hide()" on button close;

PS: I think the best way is add jQuery script:

$('.modal').modal('show');

htmx

htmx.org › examples › modal-bootstrap

htmx ~ Examples ~ Modal Dialogs in Bootstrap

<button hx-get="/modal" hx-target="#modals-here" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here" class="btn primary">Open Modal</button> <div id="modals-here" class="modal modal-blur fade" style="display: none" aria-hidden="false" tabindex="-1"> <div class="modal-dialog modal-lg modal-dialog-centered" role="document"> <div class="modal-content"></div> </div> </div>

GitHub

github.com › jschr › bootstrap-modal

GitHub - jschr/bootstrap-modal: Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. · GitHub

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more. - jschr/bootstrap-modal

Starred by 5K users

Forked by 1.1K users

Languages JavaScript 80.6% | CSS 19.4%

Angular powered Bootstrap

ng-bootstrap.github.io

Angular powered Bootstrap

Bootstrap widgets for Angular: autocomplete, accordion, alert, carousel, datepicker, dropdown, offcanvas, pagination, popover, progressbar, rating, scrollspy, tabset, timepicker, tooltip, typeahead

MDBootstrap

mdbootstrap.com › standard › modal

Bootstrap Modal - free examples & tutorial

Responsive popup window with Bootstrap 5. Examples of with image, modal position i.e. center, z-index usage, modal fade animation, backdrop usage, modal size & more.

SitePoint

sitepoint.com › blog › bootstrap › understanding bootstrap modals

Understanding Bootstrap Modals — SitePoint

November 6, 2024 - Bootstrap Modals are a lightweight, customizable and responsive jQuery Bootstrap plugin used to display alert popups, videos, images and more. They are divided into three sections: the header, body, and footer, each serving a unique purpose.

Blazor Bootstrap

demos.blazorbootstrap.com › modals

Blazor Modal Component | Blazor Bootstrap

Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content.