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>
Related
I made a login form that's perfectly horizontally centered for wide screens. Somehow, it's not the case with small screens, even though I used the viewport tag and margin: 0 auto;. What's wrong and how can I center it correctly?
html,
body {
width: 100%;
}
body {
text-align: center;
}
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</fieldset>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Here's my code: https://jsfiddle.net/gabwvf68
This is your problem area:
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
We can fix it simply by doing:
fieldset {
border: 1px groove black;
border-radius: 5px;
width: 27.5%;
margin: 0 auto;
}
form {
font-family: Segoe UI;
margin-top: 15%;
}
Move the width and margin: 0 auto; to the fieldset.
margin 0 auto; should always go on the block you are trying to center not the parent block.
You form has the width in percent is smaller that the fieldset area. Hence when you resize the window to smaller size it moves right to get the remaining wind of the window. Try giving fix width or the width as much as fieldset element width.
Like below I gave width:55% and it works fine for all window size. If you want the box width as given in the example, try giving it width:300px
html,
body {
width: 100%;
}
body {
text-align: center;
}
fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 55%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</fieldset>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Your issue lies with the use of the <fieldset> tag which even though the parent form is correctly sized and centred the fieldset child does not display to this size.
One way around this if you do not require the fieldset tag is to use a div with the class fieldset.
You should probably also include a width: 100% attribute to the input fields so that they remain within the input form.
Example
html,
body {
width: 100%;
}
body {
text-align: center;
}
.fieldset {
border: 1px groove black;
border-radius: 5px;
}
form {
font-family: Segoe UI;
margin: 0 auto;
margin-top: 15%;
width: 27.5%;
}
input {
border: 1px rgb(175, 175, 175) solid;
border-radius: 5px;
font-family: Helvetica;
font-size: 100%;
width: 100%;
margin-top: 2.5%;
padding: 1% 0% 1% 0%;
}
legend {
font-size: 150%;
}
button {
background-color: rgb(0, 117, 255);
border: 0px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.15s ease-out;
}
button:hover {
background-color: rgb(0, 83, 255);
transition: background-color 0.15s ease-in;
}
button#submit {
font-size: 100%;
margin-top: 7%;
padding: 2.5% 10% 2.5% 10%;
}
button#signup {
font-size: 100%;
margin-top: 1%;
padding: 0.6% 2.5% 0.6% 2.5%;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
<div class="fieldset">
<legend>Login</legend>
<p>
<label for="username">Username</label><br>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">Password</label><br>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit" id="submit">Log in</button>
</p>
</div>
</form><br>
<button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
</body>
</html>
Hope this helps!
your form is actually centered, but in small screen, form content (fieldset, input etc.) kind of overflows your form area. you can visualize this by temporarily adding background-color to the form. In order to fix this, try setting larger width of form for smaller screen. Also, use px value for width instead of %, if possible
So I have four inputs and a button. I tried editing them with CSS but I can't seem to get them to separate. They are all together. No matter what numbers I try to change. Here's my code for both files. Sorry if I get something totally wrong i'm a noob.
nav ul input{
margin: 0px 0px 10px 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
#signInBtn{
margin: 0px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 300px;
background-color: transparent;
color: black;
border: solid;
font-size: 30px;
text-align: center;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<header>
<nav>
<ul>
<?php
echo "<form action='includes/signup.inc.php' method='POST'>
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
<input id='usrInput' type='text' name='uid' placeholder='Username'>
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
<button id='signInBtn' type='submit'>Sign Up</button>
</form>";
?>
</ul>
</nav>
</header>
Try button,input {display:block} and the ul needs min. of one li
In your css your are using position absolute for all the input. That's why all input come all together.
nav ul input {
position: relative;
display: block;
}
#signInBtn {
position: relative;
}
just change it to something position relative or what suitable for you.
nav ul input{
/* delete position */
/* add */
display: block;
margin: 0 auto;
float: none;
}
/* do the same*/
#signInBtn{
/* delete position */
/* add */d
display: block;
margin: 0 auto;
float: none;
}
!you don't have to keep the margin 0 and float: none but i think its a good start before figureing out where you want everything
You are using position absolute, causing the overlap issue
and also you having wrong closing tag so I corrected your code, Please see demo below and tell me if you need anything else.
.wrapper {
margin: 0 auto;
}
.input_block {
text-align: center;
margin-top: 10px;
}
input {
padding: 20px;
width: 200px;
color: black;
border: solid;
font-size: 15px;
}
#signInBtn {
padding: 20px
width: 200px;
color: black;
border: solid;
font-size: 30px;
}
::-webkit-input-placeholder {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NAME</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<form action='includes/signup.inc.php' method='POST'>
<div class="input_block">
<input id='nameInput' type='text' name='first' placeholder='Firstname'>
</div>
<div class="input_block">
<input id='lstInput' type='text' name='last' placeholder='Lastname'>
</div>
<div class="input_block">
<input id='usrInput' type='text' name='uid' placeholder='Username'>
</div>
<div class="input_block">
<input id='pwdInput' type='password' name='pwd' placeholder='Password'>
</div>
<div class="input_block">
<button id='signInBtn' type='submit'>Sign Up</button>
</div>
</form>
</div>
</body>
</html>
I have been hustling with this for couple of days, and I can't seem to figure out a good way to add a tool tip to the background url, I have two images in background, far left is a user icon and far right is help icon. I am looking forward to add a tooltip or title on mouse hover over only to the tooltip.png icon which is located to the far right.
can anyone suggest a better way to implement this.
following is the code
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat, url('http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png') right 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</form>
</body>
</html>
any help is much appreciated, thank you
input[type=text], input[type=p] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
background-color: #FFFFFF;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 46px;
z-index:-1;
}
input[type=text] {
background: url('https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/user.png') 10px center no-repeat;
background-size: 24px 24px, 15px, 15px;
background-color: #FFFFFF;
}
img{
position:absolute;
right:15px;
top:20px;
}
#username{
position:relative;
}
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
right:15px;
z-index: 1;
}
img:hover + .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Log In</title>
</head>
<body>
<form id="loginform" onsubmit="return false;">
<div id="username">
<img src="http://visiblearea.com/blog/pub/System/JQueryPlugin/plugins/tooltip/tooltip-bubble-reverse.png" width=20px; height=20px;>
<span class="tooltiptext">You have to enter username</span>
<input type="text" id="email" placeholder="Username or Email" padding="10px">
</div>
</form>
</body>
</html>
Here is a link that may help you out with this.
http://www.w3schools.com/css/css_tooltip.asp
I can't solve this problem: If I click this button then it will appear like a pop up. How can I link to another html?
This is the out put html which is to be generated:
<html>
<body>
<fronm action="output.html" method="get">
first name:<input type="text" name:"first name"><br>
last name:<input type="text" name:"last name"><br>
moblieno:<input type="number" name:"mobileno"><br>
email:<input type ="email" name:"email"><br>
age:<input type="number" name:"age"><br>
school:<input type="text" name:"school"><br>
class:<input type="numeber/text" name:"class"><br>
<input type ="submit" value="submit">
</from>
</body>
</html>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
REGISTRATION FROM:
</title>
<style>
p1.position_left {
position: relative;
top: 20px;
down: 30px;
}
p2.position_right {
position: relative;
top: 45px;
right: -65px;
}
</style>
</head>
<body>
<table height: "200px" border: "3">
<tr>
<td colspan="3" style="background-color:#3152A5;" height="0" width="1350">
<p1 style="color:white" class="pos_left" class="thicker"><b> <FONT SIZE=8 face="fantasy">registration</FONT></b>
</p1>
</td>
</tr>
<p style="font-style:italic" "color:black" if you are willing to fillup the registration from pls click below />
<tr>
<td>
<p2>
<from method="get" action="output.html">
<button type="submit">continue</button>
</from>
<p>thanks for submission</p>
</p2>
</tr>
</td>
</body>
</html>
The button then I will pop up the sign up a from. How can I make this possible?
here is the pure css pop up
<style>
.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;
}
.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;
}
</style>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<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>
</div>
</div>
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.