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
Related
I have two modals, left and right, each drop down when clicked and want to have only one toggle appear as an on/off when activated.
Right now, both toggles appear when either modal is on. When the LEFT toggle is on and the modal drops down I want to hide the RIGHT toggle button and modal (and vice versa).
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.modal {
position: fixed;
z-index: 10000;
/* 1 */
top: 0;
left: 0;
visibility: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.modal.modal-visible {
visibility: visible;
}
.modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: #fff;
visibility: hidden;
opacity: 0;
transition: visibility 0s height 0.5s;
box-sizing: border-box;
}
.modal.modal-visible .modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.modal-wrapper {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
background-color: #fff;
box-sizing: border-box;
}
.modal-transition {
transition: all 0.5s;
transform: translateY(-100%);
opacity: 1;
}
.modal.modal-visible .modal-transition {
transform: translateY(0);
opacity: 1;
}
.modal-header,
.modal-content {
padding: 1em;
}
.modal-header {
position: relative;
top: 10%;
background-color: #fff;
}
.modal-close {
position: fixed;
top: 0;
right: 0;
padding: 1em;
color: #aaa;
background: none;
border: 0;
font-size: 18px;
}
.modal-close:hover {
color: #777;
}
.modal-heading {
font-size: 1.125em;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.modal-content>*:first-child {
margin-top: 0;
}
.modal-content>*:last-child {
margin-bottom: 0;
}
.modal.modal-scroll .modal-content {
max-height: 100%;
overflow-y: scroll;
}
.modal.modal-scroll .modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
button {
background: transparent;
font-family: 'Republique', sans-serif;
font-variant: normal;
font-weight: 400;
font-size: 24px;
line-height: 0.5;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
letter-spacing: .4px;
color: #000;
cursor: pointer;
outline: 0;
border: 0;
padding: 4px;
}
#righty {
position: fixed;
right: 10px;
top: 10px;
z-index: 100000;
}
#lefty {
position: fixed;
left: 10px;
top: 10px;
z-index: 100000;
}
body {
background: pink;
}
button {
color: white;
}
button:hover {
color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button>
<button class="toggle" data-modal-id="righty" id="righty">RIGHT</button>
<div class="modal" data-modal-id="lefty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close toggle"></button>
<h2 class="modal-heading">This is a modal on the left</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
<div class="modal" data-modal-id="righty">
<div class="modal-overlay toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<h2 class="modal-heading">This is a modal on the right</h2>
</div>
<div class="modal-body">
<div class="modal-content">
</div>
</div>
</div>
</div>
I tried various routes in CSS (nested divs, display:none, etc.) and struggling to find a solution. My javascript knowledge is very rudimentary, so perhaps there is a path there?
I added 4 lines in your JS:
We will declare 2 variables, one that will take the button's id (and therefore the modal id as well), and the other one, the id of the current visible modal.
We will then check if the two id are not matching, if it is true (meaning the id aren't the same) then we hide the visible modal by removing its class modal-visible.
If the two id are the same then we skip this step.
Lastly, we will toggle the modal with the button's id, it will either close it or open it.
That's all.
// common close button
$('.toggle').click(function() {
$(this).closest(".modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
var visible = $('.modal-visible').data("modal-id");
//check if the IDs are not the same
if (visible != modalid) {
$('.modal-visible').removeClass('modal-visible');
}
$(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
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 was wondering how would I turn an overlay into a button? What I don't want is a button that one manually presses to reveal an overlay. What I'd like is automatically when one enters the browser, an overlay is there, and in order to remove it they can click anywhere on the screen and it disappears, letting them interact with the page itself.
Below is the code of the overlay itself, but what would I need to incorporate into it to make it an accessible imaginary button?
...
<style>
body {
margin: 0;
padding: 0;
}
section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9);
}
#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}
#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}
</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>
...
You don't necessarily need JS :)
#overlay {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: 2s;
background: gold;
display: flex;
align-items: center;
justify-content: center;
visibility: visible;
}
#overlay-handler:checked ~ #overlay {
visibility: hidden;
opacity: 0;
}
<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
<h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>
If you set the overlay to have position: fixed and proper z-index it would cover the page by default.
Then declare a click listener on it to either set its display to none or remove it from the DOM.
Just don't use it as a container for the real content
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#overlay').addEventListener('click', clickEvent => {
clickEvent.target.classList.add('invisible');
});
});
#overlay {
position: fixed;
display: block;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10000;
background-color: rgba(100, 100, 100, 0.5);
padding: 4em 10%;
text-align: center;
font-weight: bold;
}
#overlay.invisible {
display: none;
}
<div id="overlay">
Click me to interact
</div>
<div>
This is the real content But you can't click me without closing the overlay
</div>
You can make the overlay disappear when the body of the HTML is clicked.
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>
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'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.