Last active
August 27, 2023 10:29
-
-
Save tanisha03/adfd74fae721791c0dbf13bcae985f33 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const modalContainer = document.createElement('div'); | |
| modalContainer.style.position = 'fixed'; | |
| modalContainer.style.top = '0'; | |
| modalContainer.style.left = '0'; | |
| modalContainer.style.width = '100%'; | |
| modalContainer.style.height = '100%'; | |
| modalContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; | |
| modalContainer.style.display = 'none'; | |
| modalContainer.style.justifyContent = 'center'; | |
| modalContainer.style.alignItems = 'center'; | |
| // Create an iframe element | |
| const iframe = document.createElement('iframe'); | |
| iframe.src = 'https://example.com/your-iframe-url'; // Replace with your iframe URL | |
| iframe.style.width = '80%'; | |
| iframe.style.height = '80%'; | |
| iframe.style.border = 'none'; | |
| // Append the iframe to the modal container | |
| modalContainer.appendChild(iframe); | |
| // Append the modal container to the body | |
| document.body.appendChild(modalContainer); | |
| // Find the link that triggers the modal | |
| const cartLink = document.querySelector('a[href="/cart"]'); | |
| // Add a click event listener to the cart link | |
| cartLink.addEventListener('click', (event) => { | |
| event.preventDefault(); // Prevent default link behavior | |
| // fetch details from the cart | |
| iframe.contentWindow.postMessage(dataToSend, '*'); | |
| modalContainer.style.display = 'flex'; // Show the modal | |
| }); | |
| // Close the modal when clicked outside the iframe | |
| modalContainer.addEventListener('click', (event) => { | |
| if (event.target === modalContainer) { | |
| modalContainer.style.display = 'none'; // Hide the modal | |
| } | |
| }); | |
| // Inside the iframe's script | |
| window.addEventListener('message', (event) => { | |
| if (event.data === 'object') { | |
| const receivedData = event.data; | |
| // Handle the received data in the iframe | |
| console.log('Received data:', receivedData); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment