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

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>

Related

How can I close layer popup when I click background or button?

The scenario is as follows.
Default Status (no layer popup)
When I click the button, layer popup shows.
Click the button or outside, layer popup will be hide.
I want to close the layer popup when I click background(outside) or button.
How can I do with Vanilla JS or jquery? (based on HTML)
I would appreciate it if you could answer.
When you open the popup attach a click listener to body that closes it and removes the listener.
You can use this code
//use by id
document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';
//use by className
document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';
or use jQuery
$(document).ready(function(){
$("#id").click(function(event){
// $("#id").toggle();
// $("#id").hide();
// $("#id").show();
});
});
Set id for your layer in HTML part like id="layerPopup"
Then on your JS code create event for your button
$(document).on('click', '#btnId', function(){
$("#layerPopup").hide();
});
You should appear a overlay which will cover the whole body, and give it css property z-index to lower from the button, and when apply click function on it same as my code
HTML
<div class="overlay"></div>
CSS
.overlay{
background-color: transparent;
inset: 0;
position: fixed;
z-index: 100;
display: none;
}
button{
z-index: 101;
}
JQuery
$('button').click(function(){
$('.overlay, popup').toggle();
});
$('.overlay').click(function(){
$('.overlay, popup').hide();
});
One standard way to handle such scenario is to have a backdrop div behind the popup and then add an event listener to it. You may choose to change backdrop's background color to increase pop up aesthetics visibly.
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 30vh;
left: 10%;
width: 80%;
z-index: 100;
overflow: hidden;
}
<div class="backdrop" />
<div class="modal" />
And then you can add an event listener on backdrop:
$(document).on('click', '.backdrop', function(){
$(".modal").hide();
});
PS: There may be some syntax issues!

Hoe and can you view and then edit the elements of a javascript alert box?

you see there's a javascript function called alert(); which creates a popup/dialog box is it possible to inspect it because the alert popup's design varies and is different depending on the browser I want it to look like the alert popup of Google Chrome on each and every browser and to do that I want to be able to see the CSS properties and styling of the alert popup and then put it compulsory by using the !important CSS property for all browsers to use that specific alert popup design, but that's just what I think is the way to do it but if there is some other way to do it please let me know about it and how to do it since I don't know if it's even possible.
Thanks in advance.
You cannot manipulate the "Allert" box on the browser. But you can create your own using a modal dialog box.
This example is a very simple preview of a custom modal window that you can change as you wish
function showModal() {
var mod = document.getElementById('myModal');
mod.innerHTML = 'Some text here!';
mod.innerHTML += '<button onclick="hideModal()">Close</button>'
mod.setAttribute('style', 'display: block;');
}
function hideModal() {
var mod = document.getElementById('myModal');
mod.setAttribute('style', 'display: none;');
}
#myModal {
position: absolute;
background: #000;
color: #fff;
border-radius: 10px;
text-align: center;
width: 200px;
height: 100px;
left: calc(50% - 120px);
top: calc(50% - 70px);
padding: 20px;
}
#myModal button {
display: block;
margin: 20px auto;
}
<button id="end-btn" type="button" name="" value="I am done!" onclick="showModal()">Click me</button>
<div id="myModal" style="display: none;">
</div>

Prevent scroll when virtual keyboard appears

I have a trouble with IOS device such an Iphone. When i focus input(its inside fixed div) virtual keyboard display. However it's scroll whole viewport and position fixed div scrolls too. How to solve this ?
I've been researching many posts and forums
Research 1
Research 2
What i want to:
Position fixed div must stay at top
Prevent scrolling whole site when virtual keyboard appears
Allow scroll on search-result div
My html:
<div class="header">
<button type="button" id="searchButton">Search</button>
<div class="search"><!-- Its not visible until user click on search button -->
<input type="text" id="search" placeholder="Search here"/>
</div>
</div>
Here is my html and when i type something it suggests me some result based on my
keyword. And result will be appended into DOM.
<div class="search-result"><!-- Appended via javascript -->
<ul class="suggest-list">
<li>Some item of search result</li>
</ul>
</div>
And the javascript:
$(document).on("click", "#searchButton", function(e){
var field = $("#search"); // Gets the search input
field.focus(); // Focus the input for virtual keyboard shows up
});
/* cache dom references */
var $body = jQuery('body');
/* bind events */
$(document).on('focus', 'input', function() {
$body.addClass('fix');
})
.on('blur', 'input', function() {
$body.removeClass('fix');
});
And the sass file:
.header {
position: fixed;
height: 50px;
background: #dadce7;
input {
height: 100%;
width: 100%;
border: 0;
}
}
/* Style of search result */
.search-result {
position: fixed;
top: 50px;
bottom: 0;
width: 100%;
overflow-y: scroll;
}
/* Fix the layout */
body {
&.fix {
overflow: hidden;
position: fixed; // overflow will be work;
width: 100%;
height: 100%;
}
}
This worked for me in react native to scroll the scrollView to a certain point. I don't know if this will help, but I hope it does.
//use this to scroll to the location (Maybe you could constantly set it to the same place to lock it)
this.refs._scrollView.scrollTo({x: 0, y: 0, animated: true});
//then put this in the scrollView
<ScrollView ref='_scrollView'/>

How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery

// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.

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.

Categories