Using Bootstrap 5 to display a modal using JavaScript

Creating a sleek gallery using bootstrap 5, and curious about how to activate a bootstrap modal without including "data-bs-..." in the HTML (to prevent repeating those data- attributes multiple times).

I have successfully written a functioning JavaScript for the sources, but the .modal() and .show() functions do not seem to be working. Here's my code:

function gallery(_src) {
var fullPath = _src;
var fileName = fullPath.replace(/^.*[\\\/]/, '');
var newSrc = "./assets/img/" + fileName;
document.querySelector("div#galleryModal img").src = "./assets/img/" + fileName;

document.getElementById("galleryModal").show(); }

I am stuck on this final line of JavaScript. The goal is to activate #galleryModal.

Thank you for reading, and thank you for your assistance!

javascriptfunctionbootstrap-modalshowbootstrap-5

Answer №1

If you want to work with JavaScript, it's essential to create a modal instance. Check out the code snippet below for more information: 

var customModal = new bootstrap.Modal(document.getElementById('customModal'), {
  keyboard: false
});

customModal.show();

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

Animate the tubular geometric pathway by continuously updating its values

When creating a TubeGeometry, I supplied a SplineCurve3 / CatmullRomCurve3 path as a parameter. My goal is to update the position of each point on the path using geometry.parameters.path.points[1].y += 0.01; within the requestAnimationFrame loop. Even tho ...

javascriptthree.js

Utilize the dynamic duo of GridLayout and ScrollView within the Famo.us JS framework

I'm attempting to incorporate a grid layout into a scroll view using famo.us (with angular), and the most straightforward approach seems to be working. <fa-view> <fa-scroll-view fa-pipe-from="eventHandler" fa-options="scrollView"> ...

javascriptangularjsfamo.us

Issues with Javascript code syntax

I have encountered an issue while creating a new literal control from code behind. I am able to add standard HTML into it successfully, however, when I try to insert <%= SomeDiv.ClientID %> into the literal control, it simply prints exactly what is i ...

javascriptasp.netsyntax

The onClick function within the .map function is continuously triggered

I am encountering an issue with my code where a Dialog confirmation prompt from Material UI keeps getting called unexpectedly. The problem seems to arise when I add a value to the function that is triggered by a button click within a loop of an array usi ...

javascriptreactjsfor-loopmaterial-ui

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Trouble handling Ajax response

I have two JSP files described below. The parent JSP page contains a Select dropdown box with two options. Another JSP file, dispTable.jsp, displays select boxes inside a table. If the user selects "one" from the dropdown in the parent.jsp page, I want ...

javascriptajaxjsp

Steps for launching Angular 5 application using Node.js server

I have developed an Angular 5 application that retrieves data from a node.js server. I successfully deployed the application to my web server hosted by FastComet, which supports node.js, but unfortunately, the server does not seem to be functioning properl ...

javascriptnode.jsangular

Using Sequelize to update all values in a JSON file through an Express router.put operation

I've been working on a feature in my Express router that updates data in a MySQL schema for 'members' of clubs. The members table has various columns like member_id, forename, surname, address, etc. I've successfully created an Express ...

javascriptreactjsexpressroutessequelize.js

Distinguishing between el and $el in Backbone.Js: What sets them apart?

I spent the entire afternoon struggling with this particular issue, but finally managed to resolve it. It ended up being a mix-up between assigning el and $el. Can anyone clarify the distinction between these two terms and provide guidance on when to use ...

javascriptbackbone.js

Comparison of Ajax and submit: Why am I not receiving identical responses?

Utilizing Ajax for submission and all global variables ending in box. Note that the initialization code is functioning correctly. function begin() { if (confirm("Proceed at your own risk as all consequences are yours!!")) { var usernameNa ...

javascripthtmlajaxformspost

Incorporate a unique identifier $id within the ajax request

Whenever I make changes to my product, I would like the categories to show up in a dropdown menu. Currently, it only displays: -- Select your category -- For instance, if my $current_category_id = 2, I want the dropdown to show the relevant categories. ...

javascriptphpjqueryajax

What is the process of transitioning from jQuery to plain JS for converting selectors and event capturing?

Looking for assistance in converting this code to vanilla JavaScript: document.addEventListener("DOMContentLoaded", function() { document.querySelector("textarea").addEventListener("keydown", function(event) { var textarea = this; ...

javascriptjquery

Sorting through an array of JavaScript objects and aggregating the step values for matching user names

Currently, I am delving into JavaScript and facing a certain challenge that may be considered easier for seasoned developers. My goal is to iterate through an array of objects, filter out objects with the same userName, and then aggregate their steps. The ...

javascriptarraysnode.jsobject

Position the Bootstrip 4 tooltip to automatically display on the right side

In order to customize the placement of my tooltip on desktop, I have opted for having it positioned on the right side of the elements. While this choice aligns well with my design preferences, it has presented a challenge when viewing the page on smaller s ...

javascripthtmljquerybootstrap-4popper.js

When a user clicks on a child element of an anchor tag, the function will

Is it possible to return a specific function when a user clicks on a child of an anchor element? <a href="/product/product-id"> I am a product <div> Add to favorites </div> </a> const handleClick = (event) =>{ ...

javascripthtmlreactjsdomnext.js

Challenges with NPM testing

Are there any reported issues with npm on Ubuntu 18.04? Or are there known solutions to the 100:1 error? I am currently enrolled in a course and it's crucial for me to be able to execute code using npm test. Despite multiple attempts at deleting and ...

javascriptnode.jsubuntunpmnpm-install

Is it possible to create tabs using Ajax without using jQuery?

Exploring the realm of tabs that dynamically load content into a div without redirecting to another page unveils numerous possibilities. Although the existing examples mostly rely on ajax with jQuery or similar libraries, I am inclined towards exploring a ...

javascripthtmlajax

Tips for creating a seamless Bootstrap collapse effect

I have noticed a slight flicker in the content collapse when using this code. Is there a way to make it collapse more smoothly? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script ...

javascripthtmlcsstwitter-bootstrap

How can one easily implement a countdown timer in an Ionic 3 app?

Easily create an Ionic3 timer set to 2 minutes that displays countdown like 1:59, 1:58, and finally reaches 00:00. Once the timer hits 00:00, a block of HTML content will be shown. ...

javascriptangularionic-frameworktimerionic3

Tips for dragging and dropping a file attachment directly into your web browser

Google has recently introduced this feature to Gmail, and it doesn't need you to download any additional plugins. This feature is compatible with both Firefox and Chrome browsers, but unfortunately not with Internet Explorer. ...

javascriptjquerydrag-and-drophtmlgmail