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(); });
Related
I display a loading screen after a button is clicked (which unhides the image), which then loads up another page. This works fine.
However, if the user clicks "Previous Page" and returns. My loading screen appears, so it is not hidden. It is fine if I manually refresh this page.
Here is my code.
In html:
<input id="saveForm" class="btn btn-info" type="submit" name="submit" value="Submit" onclick="load()"/>
<script>
function load() {
document.getElementById('loader').style.display='block';
}
</script>
<img class="load_spinner" id="loader" style="display:none;"/>
In css:
.load_spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0.5;
background: url(/static/img/Preloader_2.gif) center no-repeat #fff;
}
What should I do to hide the loading screen if the user returns?
Use the same technique from my answer here and use localStorage:
window.onload = function() {
if (!localStorage.getItem("firstVisit")) {
localStorage.setItem("firstVisit", "true");
} else {
document.getElementById("loader").style.display = "none";
};
Or actually remove it:
document.getElementById("loader").parentNode.removeChild(document.getElementById("loader"));
I figured out a way to do so, following Jack Bashford's answer.
By putting,
window.addEventListener( "pageshow", function ( event ) {
document.getElementById("loader").style.display = "none";
});
I effectively hide my image.
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.
I have div containing a form. When user clicks outside of the div it hides - this part works bit to good.
The problem is that while user is selecting text inside div(input, paragraph,...) and his mouse
leaves the modal(clicked state), mouseup event is triggered which causes my div to hide.
How do I ignore the mouseup event when user is selecting text?
Here is what my HTML mark up looks like:
<div class="body">
<button id="show-modal">Toggle modal</button>
<div class="modal">
<input type="text" name="opportunity-name" \>
<button>Submit</button>
</div>
</div>
CSS:
.body {
position: absolute;
width: 100%;
bottom: 0;
top: 0;
height: 100%;
background: green;
}
div.modal {
background: blue;
width: 200px;
height: 130px;
margin: 0 auto;
text-align: center;
padding-top: 70px;
}
JS:
var $modal = $('div.modal');
$('#show-modal').click(function () {
$modal.fadeIn();
});
$(document).mouseup(function (e) {
if (!$(e.target).is('div.modal *, div.modal')) {
$modal.fadeOut(100);
}
});
Here's a fiddle
How do I ignore the mouseup event when user is selecting text?
Check if the text input has focus. Ex:
if ( $(input).is(':focus') ) { ... }
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'
}
}
I am having an issue. I want to have two inline javascript popups on a web page. Here is the javascript:
<script type="text/javascript">
var popup;
Sys.require(Sys.components.popup, function () {
popup = Sys.create.popup("#popup", {
parentElementID: "target"
});
});
var popup2;
Sys.require(Sys.components.popup, function () {
popup2 = Sys.create.popup("#popup2", {
parentElementID: "target"
});
});
</script>
Here is the content of the page:
content
<span id="target" style="position: absolute; top: 50%; left: 40%; margin-top: -125px; margin-left: -200px;"></span>
<div id="popup" style="background: #ff6a00; color: #000; padding: 15px; margin: 0px">
Popup #1
</div>
<div id="popup2" style="background: #ffd800; color: #000; padding: 15px; margin: 0px">
Popup #2
</div>
content
<script>Sys.onReady(function () { popup.show(); })</script>
<script>Sys.onReady(function () { popup2.show(); })</script>
Both popups target the same location on the page. So I would expect the second one to overlap the first. The first popup is correctly popping up. The second is actually appearing in the page, it isn't popping up at all. As you can see the content on the page is going around it:
Why is this happening and how do I fix it?