Struggling with Bootstrap 4 modal functionality on mobile devices? Unable to close the modal or see its contents properly?

Attempting to incorporate the Bootstrap 4 modal into a block results in an incorrect display. The modal appears in a "fade in" mode and becomes unresponsive, making it impossible to close the modal without refreshing the browser.

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 confrm-cart-box">
                            <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
                            <h3>order confirmation</h3>
                            <br>
                            <br>
                            <p>Order number <span class="green">123456</span> has been confirmed.<br> You can monitor your order and its status by logging into your account.</p>
                            <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
                            <p>An email with the order details has been sent for your convenience.</p>
                            <p>Feel free to contact us if you have any questions.</p>
                            <p><span class="green">Your order is protected by our 100% No Quibble Money Back Guarantee</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

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

jquerycssbootstrap-4

Answer №1

Make sure to include the following CSS code snippet in your file within the < head > tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

This solution successfully worked for me!

Answer №2

To implement the close button, simply insert the following code right after the 

<div class='modal-content'>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
</button>

Give this code a try:

<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Check out this fiddle:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

Hopefully, this solution works for you!

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

Using Jquery to retrieve data in sections from a server and continuously add it to a file on the client side

I have a large dataset stored in JSON format on a Postgres Server with hundreds of thousands of rows. To prevent memory overload on the server, I need to provide users with the ability to download the data in chunks rather than all at once. This requires a ...

javascriptjqueryjquery-pluginsjavascript-objects

"Utilizing Bootstrap to create a space-saving table layout with an

Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of ...

htmlcsstwitter-bootstraphtml-table

Guide to connecting the response data from my MVC post controller

Is it possible to bind JSON data returned from a post action controller using the Controller View and JS? How can this be achieved? Controller [HttpPost] public ActionResult PBHEP(string PC,string FC) { /perform some data calculations ...

c#jqueryasp.net-mvcknockout.js

What could be causing my iframe to not adjust its size according to its content?

My attempt at resizing a cross-site iframe is not working as expected, despite following the guidance provided here. The iframe on my page seems to remain unaltered in size, and I can't figure out what mistake I might be making. The current location ...

javascripthtmlcssiframeresize

Discovering data attributes in Dojo and the Dojo counterpart to jQuery's $(this)

Hello everyone, I need help extracting the value from a specific element. The data attribute in question is named data-lang, and here's an example of it: <p class="mainText" data-lang="es">Welcome</p> Below is my current code using Dojo ...

jquerydojoinnerhtmlcustom-data-attribute

Tips for updating the date format in Material UI components and input fields

Is there a way to customize the date format in Material UI for input text fields? I am struggling to format a textField with type 'date' to display as 'DD/MM/YYYY'. The available options for formatting seem limited. It would be helpful ...

javascripthtmlcssreactjsmaterial-ui

Bootstrap side navigation bars are an essential tool for creating

Is there a way to change the hamburger icon in Bootstrap's navbar-toggle to an X button? I want the side nav to slide to the left when clicked, and also collapse when clicking inside the red rectangle. Thank you. https://i.sstatic.net/nQMGs.png Code ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can @keyframes be iterated through CSS (particularly Stylus)?

Here is some Stylus code I'm working with: for i in (1..3) .l:nth-child({i}) opacity (i / 5) When executed, the output looks like this: .l:nth-child(1) { opacity: 0.2; } .l:nth-child(2) { opacity: 0.4; } .l:nth-child(3) { opacity: 0.6; } ...

cssnode.jsiterationstyluscss-animations

Uncovering the specific file housing a CSS definition

I'm currently navigating a complex webpage with numerous CSS files that were not authored by me. I am struggling to identify a CSS style that seems elusive, as it is not located in the most obvious places (such as the CSS files) and I have no idea whe ...

htmlcss

URGENT Inquiry - How does jQuery insert the DOM Element SPAN for tag suggestions?

Check out this awesome plugin at: ** it's super compact Source: I've been trying to pinpoint where in the plugin JS file the code is placing the SPAN element that contains the tags... There seems to be something related around line 73: var t ...

jqueryjquery-pluginsautocomplete

Navigate through intricate JSON structure

Struggling with a highly complex JSON object, I am trying to list out all the properties and keys exactly as they are. While I have grasped the concept, I am having trouble with the execution. Every time the object contains another object, I need to call ...

javascriptjqueryjsonloops

Why is the radio button getting bound to the error instead of the label?

I'm currently working on validating radio buttons in a GSP file using the jQuery validation plugin. The issue I'm facing is that the error message is being bound to the first radio button and appearing at the bottom of it. Instead of displaying ...

jquerycssgsp

Dynamic jquery panel that remains expanded while concealing the menu on large screens

The page demonstrating jquery features automatically opens a side panel on large screens and displays a logo image instead of the standard 'open panel' icon. It remains open until the screen size is reduced. Take a look at the demonstration here: ...

javascriptjqueryjquery-mobile

Create a jQuery popup form with a variety of interactive buttons

Is it possible to implement a modal form in jQuery that can be triggered by multiple buttons? All the buttons have identical names and IDs. The goal is to display the modal form whenever any button is clicked. For this example, let's consider having ...

javascriptjqueryjquery-uimodal-dialog

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs

What is the best way to eliminate products that have already been utilized?

Take a look at my code snippet. $(function() { $("#tags input").on({ focusout: function() { var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig, ''); // only allow certain characters if (txt) $("<span/& ...

javascriptjqueryhtmlcssautocomplete

Instructions for adding a new line in a textarea on Internet Explorer when reading from a file

I'm facing a situation where I need to display the contents of a file (let's call it abc.txt) in a textarea on a JSP page. However, when I try to do so, all the contents are displayed in one line without any line breaks or carriage returns. Inte ...

javascriptjqueryhtmlajaxtextarea

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn ...

htmlcssbootstrap-4

Performing XMLHttpRequests and ajax requests inside a foreach loop

I am facing a issue with echoing the decoded array using var_dump. Each time I click the button, a unique xmlhttprequest and ajax call should get executed for every row. However, in reality, the ajax doesn't work as expected. Upon examining the source ...

javascriptphpjqueryjsonajax