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 = '#';
}
Related
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
In Wired they using a card as a link, like Image.
So, I tried "document.location.href" script on div.
but it isn't display a link like Image.
and also click with command key doesn't work.
How can I make div as a href using script?
try this in your div tag:
onClick="window.open('href');"
You can do it with JS.
HTML
<div id='div-id'>Click Here</div>
JS
document.getElementById('div-id').onclick = function(){window.open('http://url.url')};
Note: the link won't actually work inside of the StackOverflow snippet below because it's inside of a sandboxed iframe, but this code otherwise will work in normal contexts:
div {
cursor: pointer;
border: 2px solid gray;
border-radius: 4px;
height: 200px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<div onclick="window.open('https://www.wired.com')">click me to go to wired</div>
Actually, WIRED simply wraps the card image and text is anchor tags and applies styling to change the hover event, like so.
.card {
width: 300px;
height: 450px;
background: #eee;
border-radius: 6px;
border: 1px #ccc solid;
margin-top: 30px;
}
.card:hover {
transform: translateY(-5%);
transition: transform 350ms ease-out;
}
.card-link {
margin: 12px 5px;
font-family: "Roboto", san-serif;
font-size: 1.3em;
text-align: center;
display: block;
}
a.card-link {
text-decoration: none;
color: #595959;
}
a:hover.card-link {
color: #999999;
transition: color 200ms ease-in;
}
.card-link-image > img {
display: block;
margin: 5px auto 15px;
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 2px 2px 1px #595959;
}
.card-link-image > img:hover {
box-shadow: 3px 3px 1px #333333;
transform: translateX(-1px);
transition: transform 100ms ease-in;
}
<div class="card">
<a class="card-link-image" to="https://google.com"><img src="https://source.unsplash.com/285x285" alt="image"/></a>
<a class="card-link" href="https://google.com">Link 1</a>
<a class="card-link" href="https://google.com">Link 2
</a>
</div>
you can see it in example is this codepen. And while its very much possible to use a div as a link using the methods in both Guy L, kdedorov91, and dauzduz TV answers, I wouldn't recommend doing it.
Every element has a role it plays in the page and the browser has a tendency to takes offense when a tag isn't being used properly in the form of error and warning messages in the console.
If you do decide to use one of the aforementioned answers be sure to set the role attribute on the div to link.
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 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>