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.
Related
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 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
I have a modal that is triggered by an html button. Instead, I want to trigger the modal with vanilla Javascript. Ultimately I want to trigger the modal with date calculations to remind users of something but that's a battle for a different day.
Right now I would be very happy if I could just trigger the modal with a Javascript function instead of the html button. I do not want to use jquery, I'm trying to keep things simple and light.
Here's the HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<p>This is a sample modal box using CSS3.
</p> <p>You could do a lot of things here.</p>
</div>
</div>
Here's the CSS which is really not part of the question but it was requested. Why is it not part of the question? Because the modal works fine...fades in nice...fades out nice...perfectly positioned and responsive. The question is how to trigger it, so the answer lies in HTML and Javascript, not CSS.
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 50%;
position: relative;
margin: 10% auto;
padding: 0.26% 1% 0.6771% 1%;
border-radius: 0.5208%;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
You can "mimic" the click from JS function. Simply, get a reference to the anchor element in DOM and perform click event on it. It will behave as if you manually clicked on it.
const anchor = document.querySelector('a');
anchor.click();
If the modal works how I think it works (so with pure CSS, which is missing by the way), you should be able to run
window.location.hash = '#openModal';
to open the modal and
window.location.hash = '#';
to close it.
Here is a working example.
Thank you to "virhonestrum for the answer:
HTML:
<button onclick="openModal()">Open Modal</button>
<div id="openModal" class="modalDialog">
<div>
<a title="Close" class="close" onclick="closeModal()">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box using CSS3.</p>
<p>You could do a lot of things here.</p>
</div>
</div>
Javascript:
function openModal(){
window.location.hash = '#openModal';
}
function closeModal(){
window.location.href = '#';
}
I am referring to following link:
http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html
Here, the div ( modal window ) is loaded after clicking on the link.
I am trying to get rid of that link and open that modal on page load.
My code is as follows:
Everything is same except I have added scripts and removed the link
<!DOCTYPE html>
<html>
<head>
<title>Modal Window</title>
<style type="text/css">
.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;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
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: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close
{
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover
{
background: #00d9ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#openModal").show();
});
</script>
</head>
<body>
<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>
</body>
</html>
Similar question is asked here: How to Auto Popup a CSS3 Modal Window When Page Loads?
But its not helping.
I have also tried following scripts without any luck:
$(document).ready(function() {
$("#openModal").click();
});
$(document).ready(function() {
$(".modalDialog").show();
});
I must be doing something wrong here.
Any ideas?
The problem is that .show() is not changing the opacity of $("#openModal")
do
$(document).ready(function() {
// the first arg is duration of the effect, second is the opacity to end at
$("#openModal").fadeTo(500, 1);
});
Check out the Fiddle
As the OP pointed out the "dismiss Model Button" was not working
Updated Fiddle Demostrating a working dismiss button
as #Charaf jra suggested,
you should trigger the click with:
$(document).ready(function() { $("#openModal").trigger('click'); });
on the other hand,
most of the chances are you can trigger it onload with:
$(document).ready(function() { $(".modalDialog").modal() }
$(window).load(function(event){
$(".modalDialog").show();
})
To trigger click event , use trigger() :
$(document).ready(function() {
$("#openModal").trigger('click');
});
You have opacity: 0; for .modalDialog. In this case you need to use fadeTo instead of show.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".modalDialog").fadeTo(1,1);
});
</script>