How to disable links in iframe using z-index?

by darrion.kuhn , in category: HTML & CSS , a year ago

How to disable links in iframe using z-index?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by arnoldo.moen , a year ago

@darrion.kuhn 

To disable links in an iframe using z-index, you can overlay an element with a higher z-index on top of the iframe. This element will prevent any clicks from reaching the iframe's content.


Here is an example of how you can achieve this using HTML and CSS:

  1. Create a div element that will be placed on top of the iframe:
1
2
<div class="overlay"></div>
<iframe src="https://www.example.com"></iframe>


  1. Style the overlay element using CSS to cover the entire iframe and have a higher z-index:
1
2
3
4
5
6
7
8
9
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0); /* transparent background */
}


  1. Add some JavaScript code to ensure that the overlay element is clickable and prevents clicks from reaching the iframe:
1
2
3
document.querySelector('.overlay').addEventListener('click', function(event) {
    event.preventDefault();
});


With this setup, the overlay element will cover the iframe and prevent any clicks from reaching the links within the iframe. Users will not be able to interact with the links in the iframe until the overlay element is removed or hidden.

Related Threads:

How to change z-index for the price in woocommerce?
How to add z-index to vuetify checkbox?
How to set "z-index" of canvas elements?
How to force iframe open all links stay in the iframe?
How to force all links to open in iframe?
How to get the links of attachments using discord.js?