I am working on a site where I employ the Overlay effect. I found how to do it on W3 Schools and it's quite easy.
However, I am trying to have two separate overlays on the same page: click on one button to see one set of text, click on a second to see another.
The problem I am having is that I don't know how to differentiate the separate overlays. In my example below, if a user clicks on the first overlay button, then get the text meant for the second overlay. And if they click on the second overlay button they get the text meant for the second overlay. I can't seem to get the first overlay text to appear, in other words.
I imagine it is something fairly simple but I haven't figured it out on my own.
Below is some code. This is not my actual site, but a slightly edited version of what's offered on W3. If I could learn how to differentiate the two buttons here I can do it on my own site.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<style>
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#overlay2 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- Overlay 1: -->
<div id="overlay1" onclick="off()">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on()">Overlay 1</button>
</div>
<script>
function on() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay1").style.display = "none";
}
</script>
<!-- Overlay2: -->
<div id="overlay2" onclick="off()">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on()">Overlay 2</button>
</div>
<script>
function on() {
document.getElementById("overlay2").style.display = "block";
}
function off() {
document.getElementById("overlay2").style.display = "none";
}
</script>
</body>
</html>
You are calling the same on and off functions for both overlays... In other words, you are redefining the functions.
Change your body to the following:
<!-- Overlay 1: -->
<div id="overlay1" onclick="off('overlay1')">
<div id="text">Overlay 1 Text</div>
</div>
<div style="padding:20px">
<h2>Overlay with Text Examples</h2>
<button onclick="on('overlay1')">Overlay 1</button>
</div>
<!-- Overlay2: -->
<div id="overlay2" onclick="off('overlay2')">
<div id="text">Overlay 2 Text</div>
</div>
<div style="padding:20px">
<button onclick="on('overlay2')">Overlay 2</button>
</div>
<script>
function on(id) {
document.getElementById(id).style.display = "block";
}
function off(id) {
document.getElementById(id).style.display = "none";
}
</script>
Related
I am working on a portfolio website, for a product management and cloud profile, I am using a template as I am not a programmer:
https://github.com/codewithsadee/vcard-personal-portfolio
This is the portfolio I am using and this is my GitHub repo, with all my changes:
https://github.com/pranaysparihar/portfolio
In the 'Portfolio' section of my website, for every project, I want to open a pop-up window with the details of the project, but I am not able to work out how to code it, I am sure a modal should do the trick, it is a public repository so anyone around the globe should be able to take a look and hopefully contribute, would be great if someone could help me out here.
This is the current snippet:
<li class="project-item active" data-filter-item data-category="cloud projects">
<a href="https://google.com">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
</figure>
<h3 class="project-title">Arrival</h3>
<p class="project-category">Cloud Projects</p>
</a>
</li>
I have created a CSS stylesheet for a modal. The modal will always be in the middle due to "fixed" position. Furthermore I have added a onclick event on your a tags, to trigger the javascript function openModal and the new modal divs below your tag. You have to enter your data there, but at least you have an idea on how it can work. Finally see the script.js modifications on how the modal works.
If you have any questions feel free to ask.
CSS:
/*-----------------------------------*\
#MODAL
\*-----------------------------------*/
.modal {
display: none;
min-width: 200px;
min-height: 200px;
border: 1px solid var(--jet);
border-radius: 20px;
text-align: center;
background: var(--eerie-black-2);
z-index: 99;
padding: 16px;
color: var(--white-2);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.show-modal {
display: block;
}
/* The Close Button */
.close {
color: var(--white-2);
position: absolute;
right: 20px;
top: 0;
width: 10px;
font-size: 1.8em;
}
.close:hover,
.close:focus {
color: var(--light-gray-70);
text-decoration: none;
cursor: pointer;
}
/*-----------------------------------*\
#RESPONSIVE
\*-----------------------------------*/
index.html
<body>
<!-- modals-->
<div class="modal project-1">
<span class="close" onclick="closeAllOpenModals()">×</span>
<div class="content">Here is my modal text 1</div>
</div>
<div class="modal project-2">
<span class="close" onclick="closeAllOpenModals()">×</span>
<div class="content">Here is my modal text 2</div>
</div>
<!--
- #MAIN
-->
<main>
<!--
- #SIDEBAR
-->
Add onclick events to all your a tags within your projects
<a href="#" onclick="openModal('project-1')">
script.js - Paste it on the bottom of your file
function closeAllOpenModals() {
let modals = document.getElementsByClassName("modal");
if (modals) {
for (let i = 0; i < modals.length; i++) {
let modal = modals[i];
modal.classList.remove("show-modal");
}
}
}
//open modal
function openModal(project) {
//close all modals before
closeAllOpenModals();
let modalName = `.modal.${project}`;
//get modal
let modal = document.querySelector(modalName);
//check if modal is set
if (modal) {
//show modal
modal.classList.add("show-modal");
}
}
I am trying to display a message at the bottom when someone click on checkbox.
<style>
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
}
</style>
<div class="col-md-12" id="compare" style="stick; display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">
My message
</span>
</div>
</div>
<script>
function showProductsCompare() {
document.getElementById('compare').style.display = "block";
}
</script>
until now, all it's correct, the message appear on the page when the code is inserted
but I tried to make a sticky message like this page https://www.homedepot.com/s/french%2520door%2520refrigerators?NCNI-5 (click on the checkbox.
I don't find example or to make that.
Thank you.
This will do the work:
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
buttom: 0;
}
You will need to give the div a class of "stick":
<div class="col-md-12 stick" id="compare" style="stick; display:none;">
Everything in this code works just fine until I position my absolute element to the top then onmouseover doesn't want to work at all. I tried using CSS :hover and that did the same thing.
<html>
<div class="stylewrap">
<div class="style">
<h3 class="stylesub"><span id="letterF" onmouseover="change1()">F</span></h3>
</div>
</div>
</html>
<style>
.stylewrap {
position: absolute;
top: 0;
}
.style {
position: relative;
color: blue;
}
</style>
<script>
function change1(){
document.getElementById('letterF').style.color="red";
}
</script>
You dont need any onmouseover event with normal css it can be achieved
.stylewrap{
position: absolute;
top: 0;
}
.style{
position: relative;
color: blue;
}
.AbsoluteHover:hover{
color:red;
}
<div class="stylewrap">
<div class="style">
<h3 class="stylesub"><span id="letterF" class="AbsoluteHover">Test Hover</span></h3>
</div>
</div>
I am trying to create overlays for each row in a rails iteration.
<% #inquiries.each do |inquiry| %>
<div class= "col-xs-12 col-sm-12 col-lg-12 col-md-12">
</div>
<% end %>
For each inquiry, I want to have a button which when clicked, shows an overlay with details of comments on that inquiry.
Each Inquiry has many comments.
A simple overlay can be made by:
<div id="overlay">
<div id="text">Overlay Text</div>
<button onclick="off()">Turn off overlay</button>
</div>
<div style="padding:20px">
<h2>Overlay with Text</h2>
<button onclick="on()">Turn on overlay effect</button>
</div>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 2;
cursor: pointer;
}
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
But this uses ids for identifying corresponding overlapys. If I use classes, there can't be any identifications and overlays will interfere.
My question is how can I have separate overlays with different contents for each inquiry That means each inquiry has a button which opens an overlay with different items(the inquiry comments) in it.
pass "this" as a parameter in your click function, this will give you access to the current element that was clicked. Then traverse the parameter in your function to access its parent element. Example:
<button onclick="on(this)">Turn on overlay effect</button>
function on(clickedElement) {
clickedElement.parentElement.parentElement.style.display = "block";
}
Hope this helps!
Thanks to #grey.dim I got the direction. Solved it by using:
<div class = "overlayparent">
<div class="overlay">
<div id="text">Overlay Text</div>
<button onclick="off(this)" type="button" class = "btn btn-danger">Turn off overlay</button>
</div>
<div>
<button onclick="on(this)" type="button" class = "btn btn-danger">View/Add Comments</button>
</div>
</div>
For javascript I used:
<script>
function on(clickedElement) {
clickedElement.parentElement.parentElement.getElementsByClassName("overlay")[0].style.display = "block";
}
function off(clickedElement) {
clickedElement.parentElement.parentElement.getElementsByClassName("overlay")[0].style.display = "none";
}
</script>
I have updated the previous issue and now this is the new issue I've encountered.
On http://www.christianluneborg.com website. Click on 'Website' link and then click on the 'Pure Network' image. You will notice the modal pops up and the background of the page scrolls back up to the home page. How do I stop that? It needs to stay on the 'Website' section of the page.
HTML -
<div class="image-wrap">
<img src="img/img2.jpg" alt="Pure Network">
</div>
Modal -
<div id="Modal-Pure">
<img src="img/website151.jpg" alt="" />
</div>
<div id="fade" onClick="lightbox_close();"></div>
CSS -
#fade {
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.4;
opacity:.50;
filter: alpha(opacity=50);
}
#Modal-Pure {
display: none;
position: fixed;
top: 25%;
left: 35%;
width: 836px;
height: 636px;
margin-left: -150px;
margin-top: -100px;
background: #000;
z-index:1002;
overflow:hidden;
}
Javascript -
<script>
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
function lightbox_open(){
document.getElementById('Modal-Pure').style.display='block';
document.getElementById('fade').style.display='block';
}
function lightbox_close(){
document.getElementById('Modal-Pure').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
Instead of triggering the modal using data-attributes, do it using JavaScript.
var myModal = $('#myModal');
$('img').click(function(){
myModal.find('img').attr('src', this.dataset.src);
myModal.modal('show');
});
#myModal img {
max-width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/26/10/33/stone-goat-2175189_960_720.jpg" width="100" alt="goat">
<img src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881__340.jpg" data-src="https://cdn.pixabay.com/photo/2017/03/17/04/07/beautiful-2150881_960_720.jpg" width="150" alt="beauty">
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img />
</div>
</div>
</div>
</div>
Side-remark: id attribute should not be a number. Better to use data-attribute e.g. data-id to store the number. If you need to access it in the JS code, you would do this.dataset.id.
I finally solved the problem. I added a line of JS to stop background going to the top page when modal pops up.
document.body.style.overflow='hidden';
And added a line to enable the scrolling after hitting close link.
document.body.style.overflowY='visible';