Having trouble with Simplemodal showing link content in the modal window

Having trouble getting the modal window to display content from another link? I'm pretty sure I've connected them correctly using the right classes. This is the basic JavaScript provided by .

jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();

// Load dialog on click
$(' .basic').click(function (e) {
    $('#basic-modal-content').modal();

    return false;
});});

I've added the basic class to

<li><a href="about me/about me.html" class='basic'>about me</a></li>

and in the external HTML link (about me), I've set a div id of

<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based in Toronto. My creative approach falls along the lines of biomimicry and human-centric design. 
I recently graduated from the University of Guelph and am currently pursuing my Masters in Industrial Design at Pratt Institute.
Feel free to contact me just to chat, and be sure to check out some of my work. 
</p>

You can find my code in this zip file ()

Any assistance would be greatly appreciated! :)

Answer №1

The issue at hand is as follows:

  • When a user clicks on your link
  • A click event is triggered
  • JavaScript searches for an element with the ID basic-modal-content
  • No element with this specific ID can be found
  • As a result, the browser loads the about page

Here's what needs to be done:

  • When a user clicks on a link (with href='#')
  • A click event is triggered
  • Utilize JQuery .load() function to load the HTML content of the about page into a designated div
  • Invoke the modal with an ID matching basic-modal-content
  • JavaScript will successfully locate and display the basic-modal-content

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

Is there a way to modify the background of a div when a specific field within my component is true and the div is being hovered over?

When I hover over a div, I want the background color to change. Additionally, I need the color choice to be based on an element within my component. <div *ngFor="let u of users;" [style:hover.background-color] = "u.selected ? 'red ...

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

Performing an AJAX call with JQuery when clicking on multiple anchor elements

I have a set of anchor tags created dynamically through PHP from a database query, like the following: <a href="#" id="reply_doc" data-doc_value="1"></a> <a href="#" id="reply_doc" data-doc_value="2"></a> <a href="#" id="reply_d ...

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

What is the best method for transmitting the filename using Plupload?

I've been trying to solve this issue for a while now. My problem seems straightforward – I want to send the filename along with the file as a multipart request in Plupload, but so far, I haven't had any success. The main thing I'm missin ...

Harness the power of Vue.js by implementing plugin methods in your code

For my first attempt at building a SPA with Vue, I decided to re-use a few functions but encountered some issues. The error message "this.ExperienceToLevel is not a function" kept popping up and it left me puzzled. Furthermore, I'm contemplating if c ...

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

Can the dynamic title tag be preserved when the page is refreshed? When I refresh the page, the title tag reverts back to the original one specified in the index.html temporarily before switching back to the dynamically added one. I want the title tag to ...

Issue with jQuery and AJAX on the webpage

I've recently implemented the search functionality using AJAX jQuery, but I am facing a problem. Currently, when I type something in the search field, the search list displays accordingly. However, upon refreshing the page, the search results disappea ...

Trouble Deciphering JSON Array Using Eval Function

I'm facing an issue with two files in my project - one is a PHP file containing an array that is echoed using json_encode, and the other is a JavaScript file containing various functions for a webpage. One particular function in the JavaScript file is ...

Converting Node.js Date.toString() output into a time format in Go

My go service is currently receiving data from an external source. Here's how the data appears (in JSON format)- { "firstName": "XYZ", "lastName": "ABC", "createdAtTimestamp": "Mon Nov 21 2 ...

Angular Date Filtering to Show dd-mm-yyyy Format

I am having trouble filtering the date correctly in my controller. My desired date format is Thu Mar 31 2016 05:05:00 GMT-0400 (EDT). However, when I use the code mentioned above, the results show up as 03-31-2016. This is the code snippet from my contr ...

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

Steps for replacing the firestore document ID with user UID in a document:

I've been attempting to retrieve the user UID instead of using the automatically generated document ID in Firebase/Firestore, but I'm encountering this error: TypeError: firebase.auth(...).currentUser is null This is the content of my index.js ...

The React Testing Library encountered an error: TypeError - actImplementation function not found

Encountering a TypeError: actImplementation is not a function error while testing out this component import React from 'react'; import { StyledHeaderContainer, StyledTitle } from './styled'; export const Header = () => { return ( ...

Strategies for Effectively Managing Null Checks in Your JavaScript Project

When retrieving data from the BE API, it is in the format: { "details": { "address": { "street": "123/4", "city": "Banglore" } } } In our React project, we access this dat ...

modern marquee

I have implemented a marquee tag that displays news from my database. In order to keep the marquee up-to-date without refreshing the entire page, I utilized ajax (update_panel + timer). However, I am encountering an issue where the marquee does not continu ...

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

I have been working on this code snippet: function searchData(searchWord: any) { if (originalData.length > 0) { if (searchWord !== "") { setDataList([...originalData.filter((svc: any) => ...

Steps for adding a view to an element

Can someone help me with the syntax needed to append my template within the div "#draggableContainers"? I feel like I'm overlooking something simple. <html xmlns="http://www.w3.org/1999/xhtml"> New Page Title <script src="https://ajax ...

Issues with finding your way

Whenever I am in the History.js file and click on a product list item to navigate to another page for more details and contact the seller, the issue arises. When I click on an item in History.js, nothing happens on that page. However, when I switch to Home ...

Unable to find the specified element within Gmail

Recently, I've been working on a project with Nightwatch.js where it checks the dev environment and sends a test email to a Gmail account. Following that, it logs into Gmail, locates and clicks on the correct email. My main challenge now is trying to ...