Is there a way to connect a button to a modal on a different page so that when the button is clicked, it opens another page (in a new tab with target 0) with the modal already displayed?
Is there a way to connect a button to a modal on a different page so that when the button is clicked, it opens another page (in a new tab with target 0) with the modal already displayed?
Here is a straightforward example of how to achieve this using jQuery:
On the webpage containing the button, you will need a regular link and an attribute data-modal="modal-id" with the identifier of your modal.
page1.html:
<a class="open-modal" href="page2.html" data-modal="modal-ipsum" target="_blank">
<button>Open Modal</button>
</a>
In the page that opens when the button is clicked, you should have a modal with the same id specified in the data-modal attribute:
page2.html:
<div class="modal" id="modal-ipsum">
<h2>This is Modal Ipsum</h2>
</div>
Subsequently, in your JS file:
main.js:
$(".open-modal").click(function(e){
e.preventDefault();
var modal = $(this).data("modal");
var page = $(this).attr("href");
localStorage.setItem('modal', modal);
window.location.href = page;
});
if ("modal" in localStorage) {
var modal = localStorage.getItem('modal');
$("#" + modal).fadeIn();
}
When clicking on a link with the class open-modal, it saves a key with the value modal-ipsum in localStorage before navigating to the linked page.
The second page must also include a reference to the JS file. Upon document load, it checks for an item named modal in localStorage. If present, it fades in the modal identified as #modal-ipsum.
Please note that this code has not been tested.
This serves as a starting point for you. Feel free to experiment first and then seek assistance on platforms like Stack Overflow with your code for more tailored help.
As a new learner in jQuery/Ajax, I have a query regarding the most efficient method for loading a php page using jQuery/AJAX with an attached ID. It seems like the approach: <?php $id = $_SESSION[id]; ?> <script> var pageUrl = new Array(); p ...
I have created an HTML page where I am struggling to pass two variables using the POST method to a PHP page. The PHP page is supposed to accept these variables and then call an API to retrieve data based on them. However, my challenge is in receiving this ...
My goal is to dynamically populate a second drop-down menu based on the selection made in the first drop-down. The first drop-down contains a list of tables from my database, and the second drop-down should display providers associated with the selected ta ...
Currently, I am exploring jqgrid and trying to figure out how to display data in another jqgrid when clicking on a specific colmodel. The retrieved data from the server goes through a function and reaches the grid, but no information is displayed without a ...
Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...
Working on a web application that involves generating numerous post and get requests. I am able to monitor all the requests using Developer Tools in Mozilla/Chrome, as well as with Charles (an app). Is it feasible to develop a jQuery or JavaScript functi ...
I am currently utilizing typeahead.js with multiple datasets, following the guidance provided here. I have chosen not to employ Bloodhound in my implementation, resulting in some differences in my code structure, outlined below: $('#search .typeahead ...
Utilizing a PHP script (currentimage.php) to obtain a snapshot from my CCTV IP camera has been successful: <?php while (@ob_end_clean()); header('Content-type: image/jpeg'); // create curl resource $ch = curl_init(); curl_setopt($ch, ...
I have encountered an issue while working with VueJS regarding the implementation of two features for a set of checkboxes. Initially, the checkboxes are generated dynamically. I am in need of a master 'toggle' checkbox that can toggle the stat ...
Following the guidelines from tangowithdjango, I implemented a 'like' button in my forum app. The HTML file and Javascript: <script> $(document).ready(function(){ $("#upvote").click(function(){ var postid; postid = $(this).att ...
I recently came across this intriguing question: What is the best practice for using Javascript and Anchor Tags? The suggestion provided in response to this query involves utilizing the following code snippet: <a id="foo" href="#">Click Me</a&g ...
My goal is to retrieve the width of the initial .imagen element and apply it to the img within .imagen. HTML: <div class="imagen"> <div class="normal"> <img> </div> <div class="hover"> <img> ...
When the sidebar is opened, I am facing issues with the main content scroll and certain fields such as select options and search bar not functioning properly. I have included the main content in the routes from which it is being loaded. However, the scroll ...
I'm working on a project with a table, and I'd like to implement a feature where a column hides when double-clicked. I've seen various solutions for hiding columns on Stack Overflow, but I could use some guidance on where to add the ondblcli ...
I'm facing an issue with the transparent Navbar I built in Bootstrap 5. On mobile toggle view, the navigation links are getting lost within the text of the hero image. To resolve this, I want to keep the main navigation bar transparent and change the ...
I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...
I am encountering a frustrating issue that seems to defy the essence of CSS in JS. The problem arises when I use styled-components and attempt to apply a classname that is already used higher up in the React component tree within a styled component. Surpri ...
Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...
I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...
I have a question about setting a background image for a web page using CSS. Currently, I have the following code: body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: Verdana, Arial, Sans-Serif; background-color: #9D5922; color: #000; margin ...