1

I have above code work fine here ( if i run code ) but it causing me error on my website. What's happening is that on first time click on all links works fine but when i try to click second time then it shows blank page and you can't click anywhere on page so either i have to refresh or click back button.

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
    overflow:hidden;
  z-index:9999999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;

}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){

  .popup{
    width: 70%;
  }
}
<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#1" >View</a></div>
                          <div id="1" class="overlay">
	<div class="popup">
		<h2>pop up window one </h2>
		<a class="close" href="#" >&times;</a>
		<div class="content">
			this is my pop up window 1
		</div>
	</div>
</div>


<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#2" >View</a></div>
                          <div id="2" class="overlay">
	<div class="popup">
		<h2>pop up window one </h2>
		<a class="close" href="#" >&times;</a>
		<div class="content">
			this is my pop up window 1
		</div>
	</div>
</div>



<div style="clear:both; height:23px; font-size:9px; color:#0033FF; text-align:right; margin-right:11px;"><a href="#3" >View 3</a></div>
                          <div id="3" class="overlay">
	<div class="popup">
		<h2>pop up window one </h2>
		<a class="close" href="#" >&times;</a>
		<div class="content">
			this is my pop up window 1
		</div>
	</div>
</div>

4
  • it is working perfectly as desired.
    – Kunal Raut
    Commented Apr 16, 2020 at 13:23
  • Its not working on my page just click few times on view link. sublimefurnishings.co.uk/629/ruby_flexi/diamond_package.html
    – ahmed
    Commented Apr 16, 2020 at 13:26
  • Try to hard refresh your page by pressing F5.
    – Kunal Raut
    Commented Apr 16, 2020 at 13:27
  • if you click more than once on same link, then screen goes stuck.
    – ahmed
    Commented Apr 16, 2020 at 13:29

2 Answers 2

1

As per your instructions I got that there is a problem with theme.js file in your website.

whenever you are clicking that close "x" button of popup a function in that file at line number 105 triggers and adds a inline css in your popup and reduces the opacity of the popup div to "opacity:0".

solution: you can just change that class name and remove the click even as a temporary solution. or you can edit theme.js file and reduce your code and get better performance...

choice is yours I hope that this will help you. or else you can tell me for any kind of help! Thank you!

Happy Coding!!!

1
  • You are genius mate. it has sorted out my problem. I just changed class name from close to shut and it worked perfectly. well done. sorry can't give you rating from 0 to 1 as i dont have much ranking. however i have ticked on the sign to green as it is solved.
    – ahmed
    Commented Apr 16, 2020 at 14:52
0

It is working perfectly in Stack overflow code snippet. i think there might be some problem with your local environment.

Although if u need any kind of help, feel free to ask me!

Thank you! Happy Coding!

5
  • Its not working on my page. just click on view more than once on this page. sublimefurnishings.co.uk/198/hmo_furniture_packages/…
    – ahmed
    Commented Apr 16, 2020 at 13:27
  • exactly where do i need t click in this website? Commented Apr 16, 2020 at 13:47
  • where you can see text link "view" below every 6 boxes on right hand side (if your are on desktop pc)
    – ahmed
    Commented Apr 16, 2020 at 13:51
  • see my next answer for the exact problem Commented Apr 16, 2020 at 14:39
  • it's on and hope that would help you! Commented Apr 16, 2020 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.