Bootstrap Modal fails to display unless fade class is included

I'm feeling lost with this situation. I am working with bootstrap 4 and trying to create a modal without any animation effects. According to the official website, it says to remove the "fade" class for a non-animated modal. So I followed the instructions and removed the "fade" class, but now my modal stopped working completely. The modal div does not appear after I click the button, and it still adds the "display: none" property.

<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>

<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
    style="max-height: 100vh; ">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
            </div>
        </div>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Ensure that all the required CSS and JavaScript files from Bootstrap are included:

<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e7e617e7e6b7c20647d4e3f203f38203e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Note: Make sure not to override the modal with custom CSS.

The provided example works when using all the CSS and JavaScript files:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfbe4fbfbeef9a5e1f8cbbaa5babda5bb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button class="btn btn-primary btn-lg" data-target="#mobileMessageBox" data-toggle="modal" type="button" onclick="getTalkCQSP(this)">TEST</button>

<div id="mobileMessageBox" class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"
     style="max-height: 100vh; ">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">Hello
            </div>
        </div>
    </div>
</div>

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

Issue with loading HTML file correctly in Django

I have been attempting to integrate my Django app with an admin dashboard from a repository on GitHub. After successfully logging in, the app redirects to the dashboard, but only the HTML part loads and none of the fancy features are visible on the dashboa ...

javascriptpythonhtmlcssdjango

Use CSS to align one item to the left and center the rest on the page

Is there a way in CSS to achieve the following layout: a single block element anchored to the left side of the page the other elements centered on the page (not centered in relation to the remaining space) If there isn't enough space for this layout, ...

css

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

javascripthtml

"Initial loading issue with bootstrap carousel causes slides not to slide smoothly

I am currently working on implementing a slider carousel using Bootstrap. Although the 'active' image loads successfully, the controls and slide functionality are not working as expected. Initially, I believed this exercise would be straightforwa ...

htmlcssbootstrap-4

What is the hexadecimal color code for a specific element's background?

How can I retrieve the background color code of a specified element? var backgroundColor = $(".element").css("background-color"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elemen ...

javascriptjquerycsshexbackground-color

Assign a specific style to Fancybox links and buttons for managing the functions of 'next', 'previous', and 'close'

Utilizing the following jQuery script to hide a div whenever anything that does not have the class 'click' is clicked (used for empty space and certain other divs). $(document).click(function (event) { if (!$(event.target).hasClass('cli ...

jqueryhtmlcssfancyboxfancybox-2

Using Selenium to stream audio directly from the web browser

For my current project, I am utilizing Selenium with Python. I have been exploring the possibility of recording or live streaming audio that is playing in the browser. My goal is to use Selenium to retrieve the audio and send it to my Python application fo ...

javascriptpythonhtmlseleniumaudio

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

jqueryhtmlcssasp.nettwitter-bootstrap

The Div overlay vanishes once the Javascript function is finished running

Initially, take a look at this fiddle: http://jsfiddle.net/ribbs2521/Q7C3m/1/ My attempt to run JS on the fiddle has been unsuccessful, but all my code is present there, so we should be fine. I was creating my own custom image viewer, and everything was ...

javascripthtmlcss

How to incorporate an image within a div element without reliance on the <img> tag

I am dealing with HTML content <div> <img src="xyz.jpg"> </div> The challenge I am facing is fetching an image in hex format from a web service, converting it to JPEG, and displaying it inside a div. However, the <img src=""> ta ...

javascriptimagehtml

A unique approach to handling ngdisabled for fields that are required only

Starting off with a requirement to disable the submit button when a required field is left empty. <form name="form"> <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/> ...

javascripthtmlangularjs

Display the item for which the date is more recent than today's date

Is there a way to display only upcoming 'events' on my page based on their event_date? <% for (let event of events){%> <div class="card mb-3"> <div class="row"> <div class="col ...

javascriptcssmongodbmongoose

What is the best way to incorporate audio playback while browsing files on an HTML5 webpage with TypeScript?

<input type="file" id="soundUrl" (change)="onAudioPlay()" /> <audio id="sound" controls></audio> This is the HTML code I'm working with, and I'm looking to trigger audio playback after a user selects an MP3 file using TypeScrip ...

angularhtmltypescript

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

Currently, I am developing a project that incorporates HighCharts and Material UI for the user interface design components. I am wondering if there is a method to substitute the default HighChart reset Zoom button with the Material UI button component? ...

cssreactjsuser-interfacehighchartsmaterial-ui

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

phphtmlstringdomdocument

Tips on automatically centering an image within a div as it is resized

I'm currently working on a website that showcases cards featuring Discord users. Each card includes an avatar image within a div element, and when the user hovers over it, the image expands. However, I've noticed that as it expands, it shifts to ...

htmlcss

Removing information from the database using a JSP webpage

Having some issues with my online reservation system. The problem lies in the code where users are unable to cancel their reservations using the cancel button on the jsp page. It seems that the code is not properly deleting data from the database. Any sugg ...

javahtmlmysqljsp

How to access form elements within a submit function without specifically defining the form name

I have a form that I am submitting using a submit function. However, instead of using document id for submission variable, I am utilizing classes. $(".modalform").submit(function(event) { /* prevent form from submitting normally */ event.preventDefa ...

javascriptphphtmljquery

Changing the height of a pseudo element according to the width of the viewport in a dynamic way

Currently, I am utilizing the :before pseudo-element on a 100% width div to create a curved top, which is functioning correctly. However, I am facing the issue of adjusting the height of the :before element through media queries whenever the browser width ...

csspseudo-element

The horizontal display of JqueryMobile radiobuttons is not appearing correctly

My aim is to dynamically generate a set of radio buttons using JQueryMobile. Everything seems to be working fine except for the data-type='horizontal' attribute: On looking at this fiddle, you'll notice that the "created-via-js" radio group ...

jqueryhtmljquery-mobileradio-button