Display a pop up message inside a popup message - javascript

I’m developing a JavaScript code. When I click on the “Click me” button, a pop-up message will display with a message and “ok” button. When I click on the “ok” button on the pop-up message, it will close.
Now I want to do is when I click on the “ok” button on the pop-up window, it should close and I want to display another pop-up window with another button. If I click on that button, the second pop-up message should also be closed.
This is my code up to now.
<!DOCTYPE html>
<html>
<head>
<style>
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
</style>
<script>
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .4;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
</head>
<body>
<div id="overlay"></div>
<div id="specialBox">
<p><center>Great job<center></p>
<center><button onmousedown="toggleOverlay()">Ok</button><center>
</div>
<div id="wrapper">
<p><center>Please click the button<center></p>
<button onmousedown="toggleOverlay()">Click me</button>
</div>
</body>
</html>
JsFiddle Demo

Basically just create another specialBox, say specialBoxTwo and you can have a function to toggle that item. toggleOverlayTwo(). Your first button would call both toggles (the first one to close the first overlay, second one to open the second overlay):
<button onmousedown="toggleOverlay();toggleOverlayTwo()">Ok</button>
And the second overlay only needs to toggle the second item:
<button onmousedown="toggleOverlayTwo()">Ok</button>
Fiddle Example. Note this is rather a "quick and dirty" example. You can clean this up but having perhaps a single toggle functions that takes a parameter and use classes for each speicalBox.
Here is a fiddle example with only using a single toggleOverlay(item) function that takes a parameter.

Related

How to create a popup component with all background blured/disabled?

I am building a react app.
I want to show a popup window in the center of screen in which user can give review to the product.
While showing that window how to prevent scrolling of background and disable all background such that if user clicks outside of that window(even on a button) only that window should disappear?
I want to do something like this:
I have not idea about how it is done.
Please suggest just some way of doing that or suggest some topics which can be used here.
To prevent background, pop a black div that overides entire window.
width: 100vw;
height: 100vh;
position: fixed;
z-index: 99;
in that div, place another div with your content to be displayed.
Here is a working example:
let myEl = document.getElementById("hideScreen")
//myEl.style.display = "block";
addEventListener("click", () => {
myEl.style.display = "block";
})
#hideScreen {
top:0; left: 0;
width: 100%;
height: 100%;
position: fixed;
background: rgba(50,50,50,0.9);
display: none;
}
input {
margin: 50vmin;
}
<body>
Some text to be vanished.
Click to activate.
<div id="hideScreen">
<input type="text" id="userReview" placeHolder="your review"></input>
</div>
</body>

How do you change text of span and show a div?

I'm trying to create my own alert window that:
1.shows when I click a span that calls the function().
2. closes when I click the 'got it' button.
3. changes the text of span with the text provided.
But it's not working. It looks fine, but not working. Why?
I tried making it ID instead of CLASS, making it A...
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<style> .tooltip:hover {color: green; cursor: pointer; font-weight: bold;}</style>
<!-- the text I click to change the messagebox text-->
<span class="tooltip" onclick="alert_info('INFO')">Static</span>
<!-- the messagebox-->
<div class="popup_info" style=" top: 35%; left: 35%; border-radius: 10px; border:3px groove #d1ded6; height: 150px;
width: 400px; position: fixed; background-color: #c5d1c5; font-size: 16px; font-family: sans-serif; display: none;">
<br>
<center><span class="light_it">Information about the clicked button;</span></center><br><br><br><br>
<center><button class="close-info" onclick="this.style.display = none;">Got it</button></center>
</div>
<!--the script that changes the text of the messagebox and shows it to me-->
<script>
function alert_info(text){
//change the span's text:
document.getElementByClassName('light_it').innerHTML = text;
//display the window containing the span of text:
document.getElementByClassName('popup_info').style.display = "block";
}
</script>
</BODY>
</HTML>
I want it to work properly: change the text of the window, show the window and close it when I click the button to close (display:none';).
You can see why by inspecting the console
You can fix that by replacing
document.getElementByClassName('light_it').innerHTML = text; by document.getElementsByClassName('light_it')[0].innerHTML = text;
and
document.getElementByClassName('popup_info').style.display = "block";
by
document.getElementsByClassName('popup_info')[0].style.display = "block";
Note that you also have an issue on the "close-info" button: onclick="this.style.display = 'none';", missing quotes around none

Open a pop up window and hide it when user clicks anywhere outside the pop up window

I am trying to display a pop up window over the parent window in my java web application. When the user clicks on a link in parent window a pop up window must appear over the parent. In the pop up window user can select any value being fetched from database(hibernate). After that when user clicks "OK" button inside the pop up window or clicks anywhere outside the pop up or in parent window that pop up shall hide.
Create a wrapper element that has a z-index superior to your parent window, but lower than your popup window.
addEventListener for "click" to that element.
If the target === that element, close the popup and remove the element itself.
That will handle your clicks "outside the popup".
The rest should be handled by your window's events.
EDIT
styles
html {
height: 100%;
}
body {
position: relative;
height: 100%;
z-index: 1;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.25);
z-index: 99;
}
#popup {
position: absolute;
width: 20%;
height: 20%;
top: 40%;
left: 40%;
background: rgb(220,220,220);
box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
z-index: 100;
}
html
<input id="popupbutton" type="button" value="pop me up" />
javascript
<script>
document.getElementById('popupbutton').addEventListener('click', loadPopup, true);
function loadPopup(e) {
e.preventDefault();
e.stopPropagation();
var overlay = document.createElement('div');
overlay.id = 'overlay';
overlay.addEventListener('click', closePopup, true);
var popup = document.createElement('div');
popup.id = 'popup';
document.body.appendChild(overlay);
document.body.appendChild(popup);
function closePopup(e) {
e.preventDefault();
e.stopPropagation();
// only close everything if click was on overlay
if (e.target.id === 'overlay') {
document.body.removeChild(popup);
document.body.removeChild(overlay);
}
}
}
</script>
EDIT 2
Link to working JS fiddle
http://jsfiddle.net/md063bfr/1/
you can use div.
ex-
<td>
<div align="center" id="show_sub" style="background-color: pink;display:none;width:670px;height:370px;top:110px;overflow: auto;">
your content here
</div>
</td>
then set display none->show in javascript function
function ShowDiv(){
Popup.show('show_sub');
}
thats all.
thanx.

javaScript div popup not hiding on outside click

I am creating a JavaScript popup. The code is as below.
The HTML:
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
The CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
The Script:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
The jsFiddle Link:
http://jsfiddle.net/K9qL4/
The Issue:
I need to close this popup onClick outside. I am able to close it on click of submit inside.
What I tried to make it close onClick outside?
The Script:
function hideNow()
{
document.getElementById('ac-wrapper').style.display = 'none';
}
The HTML Code:
<div id="ac-wrapper" style='display:none' onClick="hideNow()">
What actually happened?
It closes the pop up on outside click, but also closes the pop up when I am trying to access the contents inside.
I am stuck up on this issue. Can someone guide me?
Thanks.
You need to add some code to check if you are clicking on the wrapper. Something like this would work:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
You need to add event to your function call.
And in your JS code:
function hideNow(e) {
if (e.target.id == 'ac-wrapper') {
document.getElementById('ac-wrapper').style.display = 'none';
}
}
In the function you check what the event.target is (the element you actually clicked on). If the id matches 'ac-wrapper', you know you clicked on the correct element.
See Fiddle
You can use the method stopPropagation() of the event.
see the fiddle : http://jsfiddle.net/xWrj9/
$('#popup').click(function(e){ e.stopPropagation(); });

How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?

I am looking for a way to have a div appear after the user clicks a hyperlink, and then have that same div disappear when the user clicks it again. Currently, the user is only able to have the div appear when the hyperlink is pressed, but when you click the hyperlink again, the div remains in it's "display: block;" state. Here is what I mean:
HTML
<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>
<div id="About">
</div>
CSS
#ShowAboutButton {
text-align: center;
margin-top: 40px;
background-color: white;
border: none;
cursor: pointer;
font-family: "Lato Light";
font-size: 22px;
}
#About {
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: gray;
display: none;
transition: height 2s;
}
Javascript
function showDiv() {
document.getElementById('About').style.display = "block";
}
If it is at all possible, can someone please show me how to give the user the ability to click the hyperlink and have the div slide in with a transition effect, and then when the hyperlink is clicked again have it slide back out with a transition effect? Any help would be much appreciated! Thank you in advance!
You can do this very easily with jquery slideToggle:
$("#ShowAboutButton").click(function(){
$("#About").slideToggle();
});
JSFIDDLE
$('#ShowAboutButton').click(function() {
$('#About').toggle();
});
Vanilla JavaScript :
var about = document.getElementById('About');
about.style.display='none';
document.getElementById('ShowAboutButton').addEventListener('click', function() {
//Toggling
if(about.style.display != 'block') {
return about.style.display='block';
}
about.style.display = 'none';
});
OOPS. Missed top of your code.
<a onclick="showDiv(document.getElementById('About'))" id="ShowAboutButton">What's This?
<div id="About">
</div>
function showDiv(obj) {
if(obj.style.display == "block"){
obj.style.display='none'
}
else(obj.style.display == "none"){
obj.style.display='block'
}
}

Categories