Modal closes automatically after being clicked twice on data-bs-dismiss

Having an odd issue with Bootstrap 5.0.2

In order to close the modal, I have to double-click the button (data-bs-dismiss)

It's worth noting that I use multiple modals on the page, but they only open when needed.

<div class="modal" id="open-rating-modal-for-order" tabindex="-1" aria-labelledby="open-call-modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method='POST' onsubmit="return validate_rating_modal()">
        <input type='hidden' name='page' value='submit-rate' />
        <input type='hidden' name='csrf_token' value="{$csrf_token}" />
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">
            rates
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
    </div>
  </div>
</div>

Answer №1

I successfully applied the fade class style to the first container and included a <button> element to activate the modal popup.

<!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 href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71576b6b7068707642702075552e2062343c241e21585fe47d79755b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <div class="d-grid gap-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#open-rating-modal-for-order">
        Open Modal
        </button>
    </div>

    <div class="modal fade" id="open-rating-modal-for-order" tabindex="-1" aria-labelledby="open-call-modal"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form method='POST' onsubmit="return validate_rating_modal()">
                    <input type='hidden' name='page' value='submit-rate' />
                    <input type='hidden' name='csrf_token' value="{$csrf_token}" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            Rates
                        </h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc3ddc1">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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

Implementing optimal techniques to create a JavaScript file for data retrieval in a Node.js application

I've developed a file specifically for data access purposes, where I'm keeping all my functions: const sql = require('mssql'); async function getUsers(config) { try { let pool = await sql.connect(conf ...

PHP Pagination Made Easy

Currently, I am developing a website focused on HIV prevention information warehousing. Numerous collaborators will be contributing articles using a tinyMCE GUI. The design team is keen on having control over page lengths. They are interested in implement ...

The input data from the MySQL database requires two page refreshes in order to be retrieved

Every time I input new values into the form fields and submit them, the page needs to be reloaded twice to display the updated values. For example, consider the $balance_2 in the 7th line. This line calculates the sum of all row values and updates the Bal ...

Top eCommerce frameworks optimized for Web2 and SaaS integration

Are there any payment and eCommerce frameworks that can seamlessly integrate with a REST-based application right out of the box? My server is Java-based, but I've found limited options in this area. I'm open to wrapping my interface with another ...

How is it that this JavaScript task does not trigger an error: const a = (1, 2, 3, 4);

let x = (5, 6, 7, 8); console.log(x); let y = 5, 6, 7, 8; console.log(y); In the example above, x will be assigned a value of 8, while the second line will result in an error. What is the reason behind the success of the first assignment? How does it qua ...

Escaping multiple levels of quotations in a string within HTML documents

Currently, I am developing an application with Java as the backend and AngularJS 1.0 for the frontend. To display data tables, I am utilizing the veasy AngularJS plugin which I have customized extensively for my app. However, I am facing a small issue. I ...

Creating a function within a module that takes in a relative file path in NodeJs

Currently, I am working on creating a function similar to NodeJS require. With this function, you can call require("./your-file") and the file ./your-file will be understood as a sibling of the calling module, eliminating the need to specify the full path. ...

Having trouble installing @angular/cli 4 on Debian?

I'm having trouble installing @angular/cli on my Debian box. I already have the latest versions of Node.js and npm installed. Interestingly, Angular4 works perfectly fine on my Windows machine where I use it daily. However, when I try to get it runnin ...

What is the best way to incorporate a third-party element into Vue using a script tag?

I am in the process of developing a website and I would like to include a widget that links to a podcast on BuzzSprout. Initially, I created the site using HTML to test out different designs, but now I am looking to transition it to VueJS. In my HTML vers ...

Utilize Require.js to Load Dropzone.js Library

I am interested in integrating Dropzone.js into an application that is built using Backbone and Require.JS. However, I am unsure of the correct implementation process. Should I utilize require()? What is the most effective way to handle this integration? ...

Creating a Singular Instance for Dynamically Loaded Module in Next.js

I'm currently working on creating a Singleton instance for a dynamically imported module in my Next.js app. However, the problem is that each time I call getInstance, it initializes a new instance instead of reusing the existing one. The following co ...

Exploring the implementation of Javascript, HTML, PHP, and Ajax in programming

<div class="navigation"> <a class="prev" href="index.php?month=__prev_month__" onclick="$('#calendar').load('index.php?month=__prev_month__&_r=' + Math.random()); return false;"></a> <!-- <div class="title" & ...

jquery line break in textarea

There is a 'edit description' button that, when clicked, makes text disappear and reappear if (id == 'commedit') jQuery(this).html('<textarea>'+jQuery(this).text()+'</textarea>'); else i ...

angular failure to assign a variable to $scope

When communicating with the Node server, I am able to receive a response message in the controller. However, there seems to be an issue with assigning it properly. .controller('someCtrl', function(exportExcel){ $scope.clickEvent = function() ...

Use TypeScript to cast the retrieved object from the local storage

const [savedHistory, setSavedHistory] = useState(localStorage.getItem('history') || {}); I'm facing an issue in TypeScript where it doesn't recognize the type of 'history' once I fetch it from localStorage. How can I reassign ...

The issue of a non-functional grid with scroll in a flexbox

I've encountered a problem while working with the grid layout using divs and flexbox. The header, which I want to be fixed, is overlapping with the first row and I'm struggling to get the scrolling behavior right. How can I address this issue? I ...

React-xarrows is a stunning display of multiple arrows overlapping each other in a mesmerizing fashion

I am currently using the react-xarrows library within my project to connect tables in a diagram. However, I have encountered an issue where multiple links between two tables cause the arrows to overlap, resulting in only one visible link instead of the int ...

Incompatibility Issue: Semantic UI Dropdown and Bootstrap 5 Dropdowns not Functioning

I have been attempting to create a select dropdown list using Semantic UI. Following the guidance provided on their Docs: Semantic UI Dropdown Usage seemed straightforward. However, after transitioning from Bootstrap 4 to Bootstrap 5, it seems that the ca ...

Add the JavaScript files to the components

I am working on integrating an admin template into my Angular2 project (version 2.1.0) which is already equipped with Bootstrap, jQuery, and jQuery plugins. Since there are numerous jQuery plugins and JS files involved, I am faced with the challenge of ho ...

npm not working to install packages from the package.json file in the project

When using my macbook air, I encounter an issue where I can only install npm packages globally with sudo. If I try to install a local package without the -g flag in a specific directory, it results in errors. npm ERR! Error: EACCES, open '/Users/mma ...