I have a div assigned to trigger some Javascipt which opens a 'PopUp' RSVP form on my site,I however also want to have a black background full screen overlay when the window pops up to hide the rest of the site.
The popup window works fine using this:
$(function() {
// contact form animations
$('#contact').click(function() {
$('#contactForm').fadeToggle();
});
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
So I want to attach the overlay action into this function so that it toggles on and off with the PopUpWindow. I already have a div assigned with the correct CSS,I just need to get it to also toggle:
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
I am a little stuck so any help is very much appreciated. Thanks
I think in your script, you checked for the contact form being clicked or not, but then you hide only the form, and not the sidebar-overlay section. So it's really just a slight mix up in which selector is in use. (I can't be positive if that's what's going on, as you did not include the html markup in your question.)
Here's a quick example with your code and the matching html. Only, the sidebar-overlay is hid on click of the document area.
$('#contact').click(function() {
var container = $(".sidebar-overlay");
container.fadeToggle();
});
$(document).mouseup(function (e) {
var container = $(".sidebar-overlay");
var contactform = $("#contactForm");
if (!contactform.is(e.target) // if the target of the click isn't the container...
&& contactform.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
.sidebar-overlay {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0,0,0,1);
position: fixed;
z-index: 3;
display: none;
cursor: e-resize;
}
#contactForm{
width:50%;
margin:20px auto;
padding:20px;
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="contact">click</button>
<div class="sidebar-overlay">
<form id="contactForm">
This is my form<br />
field 1 ______<br />
field 2 ______<br />
</form>
</div>
When i click on a link (a href), only background loader appears. But the defined link is not opening, the screen strucks in the loader screen. In this screen i cant access any function. I have been trying this for weeks, but no positive results. Please help me to find the error in the added codings
$(document).ready(function() {
var loading = $('<div>').prop('id', 'loading');
loading.html('<div id="stretch"></div><img src="assets/img/ring.gif" style="repeat:no-repeat;" /> Loading...');
//FOR TESTING
//alert( loading.text() ); //FOR TESTING ONLY!!!
$("#cmd").click(function() {
loading.appendTo('body');
var event = $(document).click(function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
// disable right click
$(document).bind('contextmenu', function(e) {
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
});;
#loading {
background-color: white;
background-color: rgba(1, 1, 1, 0.7);
bottom: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
}
#loading * {
vertical-align: middle;
}
#stretch {
display: inline-block;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li></i>Application</li>
.
Well of course it's not doing anything, when you stop the default event from triggering (clicking).
e.preventDefault();
This prevents the default action from happening. However, you are going to hit issues when you load 3rd party websites using Javascript.
How to resize a divs when resizing textarea within it?
If I create two or more sticky and use ESC all sticky will be closed. How to set up the ESC to close only active pop-up?
How to keep alive sticky when page is refreshing?
I use this code to make a pop-up sticky note: http://codepen.io/anon/pen/XXNBoz
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.18/jquery-ui.js"></script>
<script>
$(document).ready(function(){
function limitTextareaLine(e) {
if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) {
return false;
}
}
$(function() {
$('textarea.limited').keydown(limitTextareaLine);
});
var x = "<div class='darkYellow'><div class='close'>X</div>Note<div class='lightYellow'><textarea maxlength='250' rows='8' cols='25' class='limited'></textarea></div></div>";
$('#click').click(function () {
$('#one').append('<div class="note">'+x+'</div>');
$( ".darkYellow" ).draggable();
$('.close').each(function(){
$('.close').click(function() {
$(this).parent().remove();
});
});
});
$('.darkYellow').live('click', function() {
$(this).addClass("index");
});
$('.darkYellow').live('blur', function() {
$(this).removeClass("index");
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
window.open(location, '_self', '');
openedWindow.close();
}
});
});
Change the fixed width and height to min-width and min-height like below.
And it should auto resize.
*{
margin:auto;
padding:0;
}
.darkYellow {
position:absolute;
background-color: #76B5F0;
min-width:200px;
min-height:150px;
font-size:12px;
text-indent:1px;
-webkit-box-shadow: 1px 1px 10px #888888;
cursor:move
}
.lightYellow {
min-width:200px;
min-height:135px;
background-color: #8EC0EE;
margin-top:1px;
}
textarea {
background-color: #8EC0EE;
border: 0px;
}
.index {
z-index: 55;
}
.close {
width:7px;
height:7px;
padding:0;
line-height:2pt;
float:right;
margin-top:6px;
margin-right:4px;
font-size:14px;
cursor:pointer;
}
also use a more up to date version of JQuery, I've updated you fiddle below.
https://jsfiddle.net/link2twenty/gLrmgqgz/10/
You can capture the resize event with the resize of jQuery
$("textarea").resizable({
resize: function() {
//resize your div
}
});
For the sticky notes: how do you define the variable openedWindow?
In CSS set the parent div's display to display: table should fix the problem and make it resize as you change the textarea's size.
EDIT: As for the escape thing (just refreshed and saw that) you could use document.activeElement or since you're using jQuery you could do $(':focus').
EDIT: take your openWindow variable and set it as openWindow = $(':focus'); and as for the 3rd item you added you would have to save the active sticky in the localstorage of the page and just update it each time you change which sticky is active. Here's some info on localstorage localstorage MDN
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.
I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).
Due to my low knowledge on jQuery I am not able to make it work as of my requirements.
My problem:
I want to disable scroll of webpage while popup is active.
Background fade color of popup while active is not working on full webpage.
CSS:
body {
background: #999;
}
#ac-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
#popup{
width: 555px;
height: 375px;
background: #FFFFFF;
border: 5px solid #000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
box-shadow: #64686e 0px 0px 3px 3px;
-moz-box-shadow: #64686e 0px 0px 3px 3px;
-webkit-box-shadow: #64686e 0px 0px 3px 3px;
position: relative;
top: 150px; left: 375px;
}
JavaScript:
<script type="text/javascript">
function PopUp(){
document.getElementById('ac-wrapper').style.display="none";
}
</script>
HTML:
<div id="ac-wrapper">
<div id="popup">
<center>
<p>Popup Content Here</p>
<input type="submit" name="submit" value="Submit" onClick="PopUp()" />
</center>
</div>
</div>
<p>Page Content Here</p>
A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapper fixed.
e.g.
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.6);
z-index: 1001;
}
this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.
But scrolling the page with a popup open is BAD!!! (almost always anyway)
Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.
A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:
.my-body-noscroll-class {
overflow: hidden;
}
Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.
If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where they left off :)
To disable scrollbar:
$('body').css('overflow', 'hidden');
This will hide the scrollbar
Background-fade-thing:
I created my own popup-dialog-widget that has a background too. I used the following CSS:
div.modal{
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9998;
background-color: #000;
display: none;
filter: alpha(opacity=25); /* internet explorer */
-khtml-opacity: 0.25; /* khtml, old safari */
-moz-opacity: 0.25; /* mozilla, netscape */
opacity: 0.25; /* fx, safari, opera */
}
I had a similar problem; wanting to disable vertical scrolling while a "popup" div was displayed.
Changing the overflow property of the body does work, but also mess with the document's width.
I opted jquery to solve this using and used a placeholder for the scrollbar.
This was done without binding to the scroll event, ergo this doesn't change your scrollbar position or cause flickering :)
HTML:
<div id="scrollPlaceHolder"></div>
CSS:
body,html
{
height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
height:100%;
width:0px;
float:right;
display: inline;
top:0;
right: 0;
position: fixed;
background-color: #eee;
z-index: 100;
}
Jquery:
function DisableScrollbar()
{
// exit if page can't scroll
if($(document).height() == $('body').height()) return;
var old_width = $(document).width();
var new_width = old_width;
// ID's \ class to change
var items_to_change = "#Banner, #Footer, #Content";
$('body').css('overflow-y','hidden');
// get new width
new_width = $(document).width()
// update width of items to their old one(one with the scrollbar visible)
$(items_to_change).width(old_width);
// make the placeholder the same width the scrollbar was
$("#ScrollbarPlaceholder").show().width(new_width-old_width);
// and float the items to the other side.
$(items_to_change).css("float", "left");
}
function EnableScrollbar()
{
// exit if page can't scroll
if ($(document).height() == $('body').height()) return;
// remove the placeholder, then bring back the scrollbar
$("#ScrollbarPlaceholder").fadeOut(function(){
$('body').css('overflow-y','auto');
});
}
Hope this helps.
If simple switching of body's 'overflow-y' is breaking your page's scroll position, try to use these 2 functions (jQuery):
// Run this function when you open your popup:
var disableBodyScroll = function(){
window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
$('body').css('overflow-y','hidden');
}
// Run this function when you close your popup:
var enableBodyScroll = function(){
$('body').css('overflow-y','scroll');
$(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}
Use below code for disabling and enabling scroll bar.
Scroll = (
function(){
var x,y;
function hndlr(){
window.scrollTo(x,y);
//return;
}
return {
disable : function(x1,y1){
x = x1;
y = y1;
if(window.addEventListener){
window.addEventListener("scroll",hndlr);
}
else{
window.attachEvent("onscroll", hndlr);
}
},
enable: function(){
if(window.removeEventListener){
window.removeEventListener("scroll",hndlr);
}
else{
window.detachEvent("onscroll", hndlr);
}
}
}
})();
//for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();
https://jsfiddle.net/satishdodia/L9vfhdwq/1/
html:-
Open popup
Popup
pop open scroll stop now...when i will click on close automatically scroll running.
close
**css:-**
#popup{
position: fixed;
background: rgba(0,0,0,.8);
display: none;
top: 20px;
left: 50px;
width: 300px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
padding: 5px;
color: #fff;
}
**jquery**:-
<script type="text/javascript">
$("#open_popup").click(function(){
$("#popup").css("display", "block");
$('body').css('overflow', 'hidden');
});
$("#close_popup").click(function(){
$("#popup").css("display", "none");
$('body').css('overflow', 'scroll');
});
</script>
I had the same problem and found a way to get rid of it, you just have to stop the propagation on touchmove on your element that pops up. For me, it was fullscreen menu that appeared on the screen and you couldn't scroll, now you can.
$(document).on("touchmove","#menu-left-toggle",function(e){
e.stopPropagation();
});
This solution works for me.
HTML:
<div id="payu-modal" class="modal-payu">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS:
.modal-payu {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JS:
<script>
var btn = document.getElementById("button_1");
btn.onclick = function() {
modal.style.display = "block";
$('html').css('overflow', 'hidden');
}
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('payu-modal');
window.onclick = function(event) {
if (event.target != modal) {
}else{
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
}
span.onclick = function() {
modal.style.display = "none";
$('html').css('overflow', 'scroll');
}
</script>
I ran into the problem and tried several solutions,
here is the article that solved my problem (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/) and it is quite simple!
It uses the 'fixed body' solution, which is quite common to find in lots of posts.
The problem with this solution is, when the popup is closed, the body will scroll back to the top.
But the article points out: by manipulating the CSS top and position attributes while using the solution, we can recover the scroll position.
Another issue of the solution is, you can't apply the solution with the multiple popup scenario.
So I added a variable to store the count of the popup, just to make sure the program won't trigger the initiating process nor the reset process at the wrong timing.
Here is the final solution I get:
// freeze or free the scrolling of the body:
const objectCountRef = { current: 0 }
function freezeBodyScroll () {
if (objectCountRef.current === 0) { // trigger the init process when there is no other popup exist
document.body.style.top = `-${window.scrollY}px`
document.body.style.position = 'fixed'
}
objectCountRef.current += 1
}
function freeBodyScroll () {
objectCountRef.current -= 1
if (objectCountRef.current === 0) { // trigger the reset process when all the popup are closed
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
}
You can also see the demo on my Codepen: https://codepen.io/tabsteveyang/pen/WNpbvyb
Edit
More about the 'fixed body' solution
The approach is mainly about setting the CSS position attribute of the body element into 'fixed' to make it unscrollable.
No matter how far it has been scrolled, when the body is fixed, it will scroll back to the top, which is the behavior that I don't expect to see. (Imagine the user is browsing a long content and almost scrolls to the bottom of the page, suddenly a popup shows up and make the page scroll right back to the top, that's a bad user experience)
The solution from the article
Base on the 'fixed body' approach, additionally, the solution sets the CSS top of the body as the value of '-window.scrollY px' to make the body looks like it stays in the current scrolling position while it is fixed.
Furthermore, the solution uses the CSS top of the body as a temporary reference, so that we can retrieve the scrolling position by the attribute when we want to make the body scrollable again. (Notice you have to multiple the position you get to -1 to make it positive)