Bootstrap modals are refusing to open

I have encountered an issue where the images are not displaying on my modal. I have tried changing both the images and the code itself, but being new to this, I am unsure of what exactly is causing the problem. Could it be a fault in the Javascript code or perhaps an error within the code structure? In my attempts to troubleshoot, I have used Atom and Dreamweaver, yet the issue persists.

$(function() {
    $('#site-modal').on('show.bs.modal', function() {
        $(this)
            .find('.modal content img')
            .attr('src', $(event.relatedTarget).data('highres'))
     });
});

There seems to be a broken image link causing some trouble.

$(function() {

  $('#site-modal').on('show.bs.modal', function() {
    $(this)
      .find('.modal content img')
      .attr('src', $(event.relatedTarget).data('highres'))
  });
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- CSS style sheet-->

  <!-- Bootstrap CSS -->
  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
  <link href="css/bootstrap-4.2.1.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link href="larry 2.css" rel="stylesheet" type="text/css">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hello, world!</title>
</head>;

....(remaining text continues)

</body>

</html>

Answer №1

I successfully duplicated the given example and it is functioning as expected: https://jsfiddle.net/ayj0obwh/

It seems like the issue you are facing is related to loading a CSS library outside of the <head> section and even beyond the <html> tags. I would suggest removing it, since Bootstrap CSS is already being loaded within the <head> tag.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

Answer №2

Check out this sample code snippet for displaying an image in a modal:

$(function() {
    $('#site-modal').on('show.bs.modal', function(event) {
        var imageUrl = $(event.relatedTarget).children().attr('src');
        $('#site-modal')
            .find('img')
            .attr('src', imageUrl);
    });
});

Click here to see how the image is displayed in a modal.

Answer №3

There is no such element as: find('.modal content img')

Instead, you can use: ".modal-content img"

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

"Utilize Vue i18n to properly display currency amounts in USD

Whenever I present my currency as USD, it always shows up like this: USD$500.00. I am attempting to eliminate the USD prefix from the beginning. Below is my numberFormats configuration: numberFormats: { 'en': { currency: { ...

Discover the magic of Bootstrap Typeahead using Airport IATA codes

I am attempting to implement Bootstrap 3's Typeahead script to populate an airport search feature automatically. Here is the specific web service I am utilizing: To achieve this, I have made modifications to a functional jsfiddle by adjusting the so ...

In three.js, it appears that shadows are not being cast by imported 3D objects

Hey there, I've been diving into three.js recently and managed to successfully import a 3D model from Cinema 4D using the three.OBJMTLLoader. However, I'm having trouble getting the imported object to cast a shadow. I've tried setting object ...

Having trouble with the Three.js OBJ loader in CodePen?

Currently, I am experiencing a challenge with loading an OBJ file on Three.js. Oddly enough, the functionality seems to be working perfectly fine when I deploy the files on my server as demonstrated here: However, when attempting to run it on Codepen, I e ...

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

I am currently working on a page that utilizes an ajax function to retrieve updates from another page. The function requires the user's id, which is obtained from a session variable, to fetch any new updates. These updates are then displayed in a spec ...

Are you looking to load pictures using jQuery?

I am currently using a ul li menu setup as follows: <ul> <li><a href="#1">Image #1</a></li> <li><a href="#2">Image #2</a></li> <li><a href="#3">Image #3</a></li> ...

Tips for determining the final cost post discount entry

Calculate the final cost with discount Issue with OnChange event function CalculateDiscount() { var quantity = document.getElementById("ticket-count").innerText; var price = document.getElementById("item-price").innerText; var discount = document.getEle ...

The Angular 5 keyup event is being triggered twice

My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components. Within one of my TS files, you will find the following code: showMeTheKey(event: KeyboardEvent) ...

Tips for reducing the amount of white space on a card featuring a pie chart in a mobile layout

Is there a way to adjust the size of the pie chart or reduce the white space at the bottom? In the mobile view after inspecting with Chrome dev tools, it seems like the chart is not displaying as desired. Here is the screenshot <div ...

Retrieve products associated with a specific user using a mongoose query

Learning node, express, and mongoose is a new adventure for me. I am currently developing my first study app to gain the knowledge needed to create a fully functional node.js application. Within my application, I have a Products model (mongoose) set up l ...

What is the Content Security Policy error related to XHR-based applications in Firefox OS's Index.html file?

I encountered this issue while checking the console. The Content Security Policy on the page is blocking a resource from loading at self ("script-src app://fa91d835-176d-4fe7-bd06-fe7f57f11b68"). As part of creating a Firefox AJAX app to fetch data from ...

Navigating the file paths for Vue.js assets while utilizing the v-for directive

Recently, I started working with Vue.js and found it simple enough to access the assets folder for static images like my logo: <img src="../assets/logo.png"> However, when using v-for to populate a list with sample data, the image paths se ...

Having trouble getting tagmanager.js to work on my JSF 2.2 form. Can anyone help me troubleshoot what is going wrong?

Struggling for hours to make tagmanager.js function on my JSF 2.2 page has left me perplexed. I was successful using jsp pages, but they are outdated now. Even though I can input the tags properly, they fail to reach my java bean upon form submission. Titl ...

What is the process of importing an npm module into an Angular application?

While searching for a solution, I stumbled upon this npm package that allows us to group arrays according to our needs. I want to integrate this package into my Angular application for grouping arrays. What is the correct way to import this package into ...

Navigate to a different page in AngularJS using ngRoute without utilizing ng-view

I have a web application dashboard with a common header across all HTML files, including the profile page, page 1, and SignIn. However, I want the SignIn page to be different without the common header. How can I redirect to signin.html without using ng-vie ...

"Enhancing JSON elements on the fly with WSO2's enrich mediator: A step-by-step guide

I attempted to utilize the following configuration: <property name="messageType" scope="axis2" type="STRING" value="application/xml"/> <property expression="get-property('orderSourceSF')& ...

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

Sending variables to other parts of the application within stateless functional components

My main component is Productos and I also have a child component called EditarProductos. My goal is to pass the producto.id value from Productos to EditarProductos. Here is my Productos component code: import {Button, TableHead, TableRow, TableCell, Tabl ...

Error: Attempting to access the 'map' property of an undefined variable, cart

My project consists of two main components, App.js and Cart.js. I am utilizing material-ui and commerce.js API for this application. import React , {useState , useEffect} from 'react' import Products from './Components/Products/Products&apos ...

How can we restrict the text within a child div to a specific number of characters based on the size of the parent div?

So, imagine your HTML elements arranged as follows: <div class="Main"> <div class="About_Sports"> <div class="sportsPhoto"> <div class="content"> <di ...