I want to create accept button to allow cookies and close popup dialog
I also want close button if users don't want cookies.
But don't know how.
I used different codes from durgi sites to pair it with my but nothing happens. I do not have much Javascript experience, so I'll ask for help.
I tried different methods, but all were unsuccessful.
Please help me.
function openPopup() {
window.location.hash = 'popup1';
}
window.onload = openPopup;
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
top:120px;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<div id="popup1" class="overlay" >
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
<button class="btn btn-primary btn-lg center-block" > OK. Let's go! </button>
</div>
</div>
From my understanding, I think you are trying to create "Accept Cookie Policy" Popup.
So here is my solution with comment Inline, I have used jQuery for this solution.
// Check if localstorage is present or not in the browser
// If localstorage is not present you can use cookies as well to achieve this
// or you can send a call to the server to manage this
if (window.localStorage) {
// Check if the user is already accepted the cookie policy
if (!localStorage.getItem("userAgreed")) {
jQuery("#popup1").show();
} else {
jQuery("#popup1").hide();
}
}
// Handle Ok button click, and set a localstorage key-value pair the user is accepted the cookie popup
// So that from the next time onwards popup is not visible to returning user
jQuery("#popup1 button").on("click", function(event) {
event.preventDefault();
// Make a server call if you want to handle it in server side here
localStorage.setItem("userAgreed", true);
jQuery("#popup1").hide();
});
// On click of close button
jQuery("#popup1 a.close").on("click", function(event) {
event.preventDefault();
jQuery("#popup1").hide();
});
Let me know if it's helping or not
Related
I am trying to create a subscribe popup for the user to click on the subscribe button and to receive notification.
Does anyone know how to make this popup become responsive? Need this for my assignment. The button and the popup container are required to responsive. I have tried width:100% in #media but the width of the button will become too long. The notification part i have done.
How can I fix this? Please provide some solutions. Thank you
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
bottom:100px;
left:500px;
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>
Try this:
.subscribe {
box-sizing: border-box;
position: relative;
}
.sub-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
border: none;
border-radius: 5px;
z-index: 9;
transform: translate(-50%, 50%);
}
The answer to this question depends on what you mean by 'make it become responsive', and how you want it to respond.
In general, using units such as vw, vh, and % create sizes that are responsive to your window size.
Media queries can be used if you want styling to change at certain dimensions.
Place this at the end of your CSS, and your popup window will align to the left when your window is 600px or less.
#media (max-width: 600px){
.sub-popup{
left: 0px;
}
The left and bottom using px positioning on the popup form were messing up the responsiveness, first fix that came up to my mind was replacing them with margin 0 auto which basically centers it within it's parent container.
If you're using an absolute unit (px), you need to set media queries to match different screen sizes and change the values accordingly.
I'm not trying to say that using px for sizing is bad, it really depends on what are you trying to achieve so getting familiar with the different units really comes in handy.
There are actually quite a few solutions for this including flexbox, bootstrap, media queries, using relative units.
Hopefully these good reads can help you.
W3 CSS Units
What’s The Difference Between PX, EM, REM, %, VW, and VH?
function subOpen() {
document.getElementById("sub").style.display = "block";
}
function subClose() {
document.getElementById("sub").style.display = "none";
}
.subscribe{
box-sizing: border-box;
}
.open-button {
background-color:cornflowerblue;
color: black;
font-weight: bold;
padding: 16px 15px;
border: none;
cursor: pointer;
opacity: 0.8;
width: 15%;
border-radius: 5px;
}
.sub-title{
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.sub-p{
text-align: center;
font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
display: none;
position: fixed;
margin: 0 auto; // replaced left and bottom positioning with margin 0 auto
border: none;
border-radius:5px;
z-index: 9;
}
#sub {
max-width: 300px;
padding: 10px;
background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width:50%;
margin-bottom:10px;
margin-left: 70px;
opacity: 0.8;
}
#sub .cancel {
background-color: red;
}
#sub .btn:hover, .open-button:hover {
opacity: 1;
}
<div class= "subscribe">
<button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
<div class="sub-popup" id="sub">
<h4 class="sub-title container">SUBSCRIBE US</h4>
<p class="sub-p">Click to receive notification to get our updates and special offers now!</p>
<button type="submit" class="btn subscribeBtn">Subscribe</button>
<button type="button" class="btn cancel" onclick="subClose()">Close</button>
</div>
</div>
I know the title is familiar, but the answers weren't !
The answers here :
Button onclick event not working in iOS unless you go away from app and back, then it works
OnClick not Working on Ios11
Safari on iOS 9 does not trigger click event on hidden input file
onclick event doesn't work on iphone
Click events not firing on iOS
How do I use jQuery for click event in iPhone web application
jQuery click events not working in iOS
JavaScript OnClick not working on iOS
Make onclick work on iphone
https://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
didn't work for me, so before marking this question as duplicate, check my code :
THIS IS HTML :
<script>
function showalert() {
alert("I am an alert");
}
</script>
<div id="replace1" >
<br><br><br>
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
<!-- <button value="HI" onclick = "showalert();">-->
<br><br><br>
</div>
THIS IS THE CSS :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,300,300i,4 00,400i,700,700i,900,900i');
* {
font-family: Montserrat;
font-size: 14px;
}
.U3Gxm-butn {
border: 1px solid #E77817;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #E77817;
cursor: pointer;
background:white;
margin:0 auto 10px;
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each */
float: left;
}
.U3Gxm-butn:focus, .U3Gxm-butn:hover {
background: #E77817;
outline: 0;
color: #fff;
}
.actn-disabled{
cursor: not-allowed !important;
background: #dddddd !important;
color: black !important;
pointer-events: none;
}
.actn-selected{
background: #fba250 !important;
color: black !important;
}
#loading
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image
{
position: absolute;
top:30%;
left: 40%;
z-index: 100;
}
td {
word-wrap: break-word;
}
/* Below class use for op position */
.xspace{
position: relative;
top: 20px;
}
.xspace:first-letter{
position: relative;
top: 20px;
text-transform: capitalize;
}
.xspacedown:first-letter{
padding-bottom: 0%;
text-transform: capitalize;
}
.xspaceop{
position: relative;
top: 50px;
style:overflow-x:auto;
}
.xyspace:first-letter {
text-transform: capitalize;
}
#replace1 > .xyspace{
display:inline-block;
}
#replace1 > .xyspace:first-letter{
text-transform: capitalize;
}
.ntfnbkpjob1{
cursor:pointer;
}
I have created separate HTML and CSS files in my xCode project and this is how i am loading my html file in swift :
let url = Bundle.main.url(forResource: "webview", withExtension: "html")
webView.loadFileURL(url!, allowingReadAccessTo: url!)
Have tried everything possible, changed CSS to cursor:pointer, did everything mentioned in these solutions, nothing seems to work.
These solutions might be relating to their problem.
Every problem has different answer !
Can anyone suggest anything that works in this scenario ?
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
Shouldn't your on click look like this onClick="alert('sometext')" ?
I'm guessing you are talking about this one as button is commented out.
I want to show a popup message when i click on select button like "you have selected this event"
how to do in angular 2?
<button type="button" class="button event-buttons" [disabled]="!owned" style=""(click)="eventSet()">
SELECT
</button>
You can use a structural directive *ngIf to create popup, my example:
<button type="button"(click)="popup = true">
SELECT
</button>
<div class="overlay" *ngIf="popup">
<div class="popup">
<h2>Here i am</h2>
<a class="close" (click)="popup = false">×</a>
<div class="content">
you have selected this event
</div>
</div>
</div>
some styles:
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
cursor: pointer;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.popup{
width: 70%;
}
}
https://stackblitz.com/edit/angular-g4rdha?file=src%2Fapp%2Fapp.component.ts
Hope it helps!
Add Onclick event to parent page. For popup just add a modal create with reference of a seperate page in order to customize pop up seperately.
let test= this.modalCtrl.create('popuppage',
{
message: 'message',
(Enter all parameters you want to pass to the pop up page)
}
,{cssClass:'settings-modal'});
test.present();
Now you can create your pop up page named 'popuppage'as you require
May be you are looking for toaster in the screen which you can add to your project by installing third party UI library like primeNg and it is good to use.
Please look it here.
https://primefaces.org/primeng/#/toast
I'd like to close the modal by clicking anywhere else outside of it but don't really know how to put the functionality together. Ideally I'd like to have a pure JS or AngularJS solution. Any help on this matter is greatly appreciated.
Fiddle
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #fff;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
You can do this in angular by adding click handlers to both the inner modal content and the outer div. In the inner div, you will need to stop event propagation by using $event.stopPropagation, otherwise the outer click handler will be called too. Then, when the outerDiv click handler is called, you can use angular's $location service to close the modal. See the attached plunker:
https://plnkr.co/edit/a3b5fU9G6wuXLLhiyI2D
The way I'd do it would be like this:
$('.wrapper').on('click', function(e) {
var modal = $(this).find('.modal');
if (!modal.is(e.target) && modal.has(e.target).length == 0) {
modal.removeClass('opened');
}
});
By the way it's better to set the visibility property to "hidden" when the modal is closed instead of disabling pointer-events. That way the user won't be able to click it either.
I'm trying to get a popup to show on load once per session. I'm seeing it okay from my end but my client is saying that he's not seeing it after the first time even after restarting his browser and clearing the cache.
Is there something I should change with the code below? Also, I'm unable to click the close button on mobile with touch. How can I make #popup-close respond to touch?
HTML
<div id="popup-wrap">
<div id="popup">
<div id="popup-close">×</div>
<a href="http://google.com/" target="_blank">
<img src="image.jpg" width="100">
</a>
<h2>We are featured this month in Architectural Digest!</h2>
Read the article »
</div>
</div>
JS
if (localStorage.getItem('popState') != 'shown'){
$("#popup-wrap").delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#popup-close').click(function(e) {
e.preventDefault();
$('#popup-wrap').fadeOut(); // Now the pop up is hidden.
});
CSS
#popup-wrap {
background: #fff;
box-shadow: 1px 0 3px #999;
display: none;
font-family: 'montserrat', sans-serif;
height: 210px;
left: 50%;
margin-left: -250px;
margin-top: -105px;
opacity: .8;
position: absolute;
text-transform: uppercase;
top: 50%;
width: 500px;
z-index: 11;
}
#popup {
padding: 40px;
position: absolute;
}
#popup-close {
cursor: pointer;
font-size: 36px;
position: absolute;
right: 10px;
top: 0;
}
#popup img {
float: left;
margin-right: 20px;
}
#popup h2 {
color: #222;
font-size: 20px;
margin-bottom: .5em;
}
#popup a {
font-size: 12px;
text-decoration: none;
}
http://jsfiddle.net/23gu3L0h/
You may try to change localStorage to sessionStorage like I have done
In this Fiddle.
localStorage is meant for longterm use where as sessionStorage is more shortterm. Here is another post with some answers explaining them further.
It shows up once until you either clear your cache or restart your browser.
Also the I was able to close the pop-up from my phone in the fiddle.
Hope this helps.