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>
Related
I tried making a spinning menu button for a website. I want it to spin and change its content when clicked, then turn back when it's clicked again
Here is my code :
//Shops
const shopButtons = document.querySelector('.shopButtons')
//Shop animation on click
shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));
.shopButtons {
background-color: blue;
border: 3px solid black;
border-radius: 40px;
position: fixed;
bottom: 15px;
left: 15px;
width: 80px;
height: 80px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
transition: .75s;
transform: rotate(-359deg);
}
.shopButtons.openMenu {
background-color: rgb(0, 0, 120);
}
.shopButtons::after {
content: '\1F6D2';
color: white;
font-size: 3em;
transition: background-color .75s;
margin: auto;
border-radius: inherit;
}
.openMenu {
transition: .75s;
transform: rotate(0deg);
}
.openMenu::after {
background-color: rgb(0, 0, 120);
color: white;
content: '\00D7';
font-size: 50px;
}
<html lang="en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Website</title>
</head>
<body>
<button class="shopButtons" id="mainShop"></button>
<script src="../scripts/script.js"></script>
</body>
</html>
I think it works pretty well (not sure if the code is optimized though), but I am struggling to make it so the shopping cart icon only appears when the button isn't rotating.
As of right now it works when the menu is opened, but on exit, the shopping cart appears before the rotation animation is over
Is there a simple way to do this ?
I have tried delaying the rotation animation, but this only lead to a very slow animation. I also tried delaying the image change using JavaScript, but it wasn't functional.
What is happening is that you are rotating the entire button, rather than the icons. So the shopping cart will always spin.
What I did here is removed the transformation from the .shopButtons button. Then added a 360deg rotation to just the .openMenu button.
Maybe this is an easy solution for you.
//Shops
const shopButtons = document.querySelector('.shopButtons')
//Shop animation on click
shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));
.shopButtons {
background-color: blue;
border: 3px solid black;
border-radius: 40px;
position: fixed;
bottom: 15px;
left: 15px;
width: 80px;
height: 80px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.shopButtons.openMenu {
background-color: rgb(0, 0, 120);
}
.shopButtons::after {
content: '\1F6D2';
color: white;
font-size: 3em;
transition: background-color .75s;
margin: auto;
border-radius: inherit;
}
.openMenu {
transition: .75s;
transform: rotate(360deg);
}
.openMenu::after {
background-color: rgb(0, 0, 120);
color: white;
content: '\00D7';
font-size: 50px;
}
<html lang="en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Website</title>
</head>
<body>
<button class="shopButtons" id="mainShop"></button>
<script src="../scripts/script.js"></script>
</body>
</html>
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 currently working on a library bookkeeping service for my school. I am using Electron to create practically a website, which will then be compiled into a cross-platform application afterward. However, I have run into an early problem with angular routing. I plan to use angular navigation because it removes the white buffer between switching pages and in this app I plan to be switching pages frequently.
So far this is my home screen, the animation inside works fine without the ng-view container, but then the links don't work, however, when I put the ng-view container, the animation and whole page altogether seem frozen. Also referring to the root folder for routing doesn't seem to be working for me, so I had to use ../ to go up one folder.
Here is my code.
var app = angular.module("Librain", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../HomePage/homePage.html"
})
.when("/people", {
templateUrl: "../MembersPage/members.html"
})
});
body {
background-color: #83DDF7;
margin: 0;
padding: 0;
/*Sets to fill background*/
min-height: 800px;
min-width: 1024px;
/*Sets up scaling*/
width: 100%;
height: auto;
/*Sets up the positioning*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*==========Title Box For Title===========*/
.SideBox {
/*positioning and sizing*/
position: fixed;
text-align: center;
top: 55%;
left: 0;
width: 0%;
height: 18%;
/*color of the box with opacity*/
background-color: rgba(255, 255, 255, .8);
box-shadow: 0 0 .25em rgba(158, 67, 7, .25);
border-radius: .25em;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
/*The */
animation: slideIn 3s forwards;
}
#keyframes slideIn {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
width: -5%;
}
100% {
width: 30%;
}
}
/*The styling for the text within the content box*/
.SideText {
color: #0090AD;
font-size: 0px;
font-family: Arial;
text-align: left;
animation: appearingText 2s forwards;
animation-delay: 1s;
}
#keyframes appearingText {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
font-size: 0px;
}
100% {
font-size: 125px;
}
}
/*=============Navigation bar============*/
ul {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 28px 32px;
}
li a:hover {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
color: black;
}
li a.active {
color: white;
background-color: #0090AD;
}
<!DOCTYPE html>
<html ng-app="Librain">
<head>
<!--Sourcing jquery, css, and necessary pages-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link rel="stylesheet" href="homePageStyles.scss">
<script src="homePage.js"></script>
<title>Librain</title>
</head>
<body>
<div class="SideBox">
<div class=SideText>Librain</div>
</div>
<ul>
<li><a class="active" href="#!">Home</a></li>
<li>Members</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Thank you for helping me, I am new to this and have never attempted an app before. I appreciate all the help I can get.
Also is it possible to scale the text within the sidebox with the box itself? As I make the window smaller, it gets out of place and is too large for the box.
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.
My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.
Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`
What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?
Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>