I am trying to create an overlay box and want the whole background to be masked.
However, the mask is only covering the body of the page. I want the mask to extend to the edge and top of the page.
Is there a way to manually position the mask to cover the entire page?
Thank you.
CSS:
body
{
background-color: #C75656;
text-align:center;
font-size:16px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
text-decoration: none;
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
}
#middleContainer {
width:780px;
margin: 5px auto;
padding: 10px 0;
}
.box {
background:white;
border-style:solid;
border-width:1.5px;
border-color:#071419;
border-radius: 12px;
-moz-border-radius: 12px;
}
.modal {
background-color:#fff;
display:none;
width:700px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>mySITE</title>
<!-- Meta tags go here -->
<!-- Links to Icon, favicon, css, jquery, ajax, etc. -->
<link rel='stylesheet' type='text/css' href='default.css' />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.5,
},
});
$("#login form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
</head>
<body>
<span><h1>my<font color="red">SITE</font></h1></span>
<a class="modalInput" rel="#login">Login</a>
<div id="middleContainer" class="box">
<div id="title">Content</div>
</div>
<div class="modal" id="login">
<h2>Login or Regester.</h2>
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
</body>
</html>
This is what i am using for all my projects
<style>
.mask {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:1000;
opacity: 0.5;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
top: 100px;
left: -50%;
margin-left: -150px;
background: white;
z-index: 1001
}
</style>
<div class="mask"></div>
<div class="overlay"></div>
Put this in the head of your document
<style type="text/css" media="all">
.mask {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2000px;
background: black;
opacity: 0.5;
}
</style>
And then put
<div class="mask"></div>
anywhere in your html, but I would put it at the top or the bottom. Because it is absolutely positioned, it really doesn't matter.
Related
I have the following script which brings up a modal window with a form inside. What I would like to do now is modify it such that when the modal window appears the focus is automatically given to the text entry box. I have tried autofocus but that does not appear to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow:target {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
Open modal
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
Close modal<br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
</html>
most likely "autofocus" does not work because you are using a fragment (at least judging by this issue https://bugs.chromium.org/p/chromium/issues/detail?id=1046357)
here is my example using js (changed css, added js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Modal Example</title>
<style>
#container{
margin:0 auto;
width:80%;
font-family: verdana,arial,sans-serif;
font-size:16px;
}
#modalWindow {
position: fixed;
font-family: arial,helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
opacity:0;
transition: opacity 400ms linear;
pointer-events: none;
}
#modalWindow.show {
opacity:1;
pointer-events: auto;
}
#modalWindow > div {
width: 400px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 20px 20px 13px 20px;
border: solid;
border-color: black;
border-width : 2px;
background: #DAF7A6;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>CSS Modal Example</h1>
<button id="show-modal">Open modal</button>
<div id="container">
<p>
This is the main page.
</p>
</div>
<div id="modalWindow">
<div>
<button id="hide-modal">Close modal</button><br>
<p>
This is the modal. Put any text or controls here.
<form action="/" method="post">
<input id="event" type="text" name="event">
<input type="submit" value="Submit">
</form>
</p>
</div>
</div>
</body>
<script>
const modalWindow = document.querySelector('#modalWindow');
const inputEvent = modalWindow.querySelector('#event');
const toggleModal = () => {
modalWindow.classList.toggle('show');
if (modalWindow.classList.contains('show')) {
inputEvent.focus();
}
}
document.querySelector('#show-modal').addEventListener('click', toggleModal);
document.querySelector('#hide-modal').addEventListener('click', toggleModal);
</script>
</html>
I have few links coming from loop,once I click to those links a div will be showing on each time.But here I need to hide the div once I click outside anywhere except on links.Here is the code below.When I click on 'click-1',div will show,again when I click 'click-2',other div will show..so on
https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="maindiv" ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in data" >
<div ng-click="setActiveItem(x)" class="id">Click-{{x.id}}</div>
ssssssssssss
<div class="arrow_box name" ng-show="activeItem==x">
<h3>{{x.name}}</h3>
<p>Hello world</p>
<h3>{{x.name}}</h3>
<p>Hello world</p>
<h3>{{x.name}}</h3>
<p>Hello world</p>
</div>
</li>
</ul>
</div>
</body>
</html>
SCRIPT.JS
var data = [{"name":"name1","title":"title1","id":"1"},{"name":"name2","title":"title2","id":"2"},{"name":"name3","title":"title3","id":"3"}];
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = data;
$scope.setActiveItem = function(item){
$scope.activeItem = item;
}
// show first on page load
// $scope.activeItem = data[0];
});// Code goes here
STYLE.CSS
ul li{
list-style-type:none;
cursor:pointer;
}
ul{
margin:0;
}
.maindiv{
position:relative;
}
.name{
position: absolute;
left: 97px;
background: #fff;
border: 1px solid;
width: 61px;
height: 202px;
overflow: auto;
width: 24%;
}
.arrow_box {
position: absolute;
background: #ffffff;
border: 1px solid #ccc;
}
.arrow_box:after, .arrow_box:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 5px;
margin-top: -5px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-right-color: #000000;
border-width: 8px;
margin-top: -8px;
}
.id,name{
float:left;
}
If i understood right, you could try displaying an overlay when you open your "arrow_box" that would catch a click event to hide it and close the "arrow_box".
I've updated your plunker : https://plnkr.co/edit/CHk6atcGYLykpeXN7Z1g?p=preview
The key elements are those :
The overlay :
<div class="overlay" ng-show="activeItem!=null" ng-click="setActiveItem(null)"></div>
The corresponding css :
.overlay{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
background:rgba(0,0,0,.5);
z-index:1;
}
The modified arrow_box css :
.arrow_box {
position: absolute;
background: #ffffff;
border: 1px solid #ccc;
z-index:10; <------ the modification
}
Notice that also moved your ng-app and ng-controller.
Hope this helps
I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
this is a very basic task concerning css. I'm trying to place a search bar to the very right corner of the screen but, When ever I add/reduce padding to the div, the search bar remains in the same place but the screen size increases horizontally. Here is the code to better understand:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>cats</title>
</head>
<body>
<form class="form_style">
<input type="text" class="search" placeholder="Search me..." required>
<input type="button" class="button" value="Search">
</form>
<div id="top_menu">
<ul>
<li>Suomeksi</li>
<li>Log in</li>
<li>Sign in</li>
</ul>
</div>
<style type="text/css" media="screen">
#top_menu {
height: 35px;
font-size: 18px;
text-align: center;
border-radius: 8px;
}
#top_menu li {
display: inline;
padding: 20px;
}
#top_menu a {
text-decoration: none;
color: #00F;
padding: 1px 1px 1px ;
}
.form_style {
width:500px;
margin:50px ;
position: absolute;
left: 80%;
top:-40px;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-5px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
</style>
</body>
</html>
and here is the screen capture
try it
.form_style
{
position: absolute;
right: 0;
}
it should work
You can simply do this:
.form_style {
width:500px;
margin:50px ;
float:right;
top:-40px;
}
Try this......
.form_style {
position: relative;
margin-top:-18px;
float:right;
right:-18px;
top:0px;
}
Your CSS for the right-aligned element should contain right:0
Maybe you also need to remove the width and margin definitions
.form_style {
/* width: 500px;*/
/* margin: 50px; */
position: absolute;
right: 0;
}
First at all you need to remove the margin value for the form style, then position to the right not with the left value and align the content:
.form_style {
width:500px;
margin:50px ; //Make this 0;
position: absolute;
right:0; //Add Right and remove left
top:0; //Make this 0;
text-align:right; //Align the elements inside form to the right
}
Check this Demo Fiddle
I've been having a problem with a new website theme I'm creating, this didn't occur to me before until I scrolled down.
Here is the problem. I created a fixed menu (which will stick to the top of the page wherever you are on the page). When you scroll down, the menu goes UNDER the content box instead. I couldn't find a solution to this either. I'm not a professional html or css web developer anyway.
Source:
File: Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><img src="interface/images/interface/header.png" title="Home"></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
File: index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
File: Footer.php
<!--Footer Container-->
</body>
</div>
</html>
The CSS Styles: style.css:
#font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
I suppose the problem must be somewhere in my CSS for the menu. I don't think it's layered correctly in the html, but again, I suck at layering, I'm still learning. :)
Thanks in advance.
LIVE VIEW
Scroll down over the content box.
Set the z-index to 2.
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
z-index: 2;
}
Just add z-index in your menu.
CSS
#menu {
z-index: 99999;
}