This tutorial teaches how to create modal windows in CSS3. It works perfectly on Chrome and Firefox. However, Internet Explorer doesn't load any of the links containing hashtags.
Tutorial
Demo
The first link has the source code but I'll post a copy below for future reference.
HTML
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Modal Popups | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/modal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>CSS3 Modal Popups</h2>
Back to original tutorial on <span>Script Tutorials</span>
</header>
<!-- panel with buttons -->
<div class="main">
<div class="panel">
Log In
Sign Up
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" />
<a class="close" href="#close"></a>
</div>
<!-- popup form #2 -->
<div class="popup">
<h2>Sign Up</h2>
<p>Please enter your details here</p>
<div>
<label for="email">Login (Email)</label>
<input type="text" id="email" value="" />
</div>
<div>
<label for="pass">Password</label>
<input type="password" id="pass" value="" />
</div>
<div>
<label for="firstname">First name</label>
<input type="text" id="firstname" value="" />
</div>
<div>
<label for="lastname">Last name</label>
<input type="text" id="lastname" value="" />
</div>
<input type="button" value="Sign Up" /> or Log In
<a class="close" href="#close"></a>
</div>
</body>
</html>
CSS
.main {
background: #aaa url(../images/bg.jpg) no-repeat;
width: 800px;
height: 600px;
margin: 50px auto;
}
.panel {
background-color: #444;
height: 34px;
padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
border: 2px solid #aaa;
color: #fff;
display: block;
float: right;
margin-right: 10px;
padding: 5px 10px;
text-decoration: none;
text-shadow: 1px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
border-color: #eee;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup label {
display: inline-block;
text-align: left;
width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
border-color: #555 #888 #888;
}
I've run into this problem before with hashchange events in internet explorer, so I wrote this code (Guaranteed by me down to IE7):
Add class hash-modifier to every element that you have that modifies
the url hash.
JavaScript:
$(function () {
var hashchangeHandler = function () {
switch (location.hash.replace(/^.*#/, '')) {
case 'sign-up':
alert('signing up/opening sign-up modal');
break;
case 'login':
alert('logging in/showing login modal');
break;
default:
// do default something
}
}
BindHashChangeEventListener(hashchangeHandler);
// Run the initial hashHandler function on document ready
hashchangeHandler();
});
function BindHashChangeEventListener(hashHandler) {
if (("onhashchange" in window) && !($.browser.msie)) {
// Use built-in jQuery hashchange event
$(window).bind('hashchange', hashHandler);
} else {
//IE and browsers that don't support hashchange
$('.hash-modifier').on('click', function () {
setTimeout(hashHandler, 50);
});
}
}
HTML:
sign up
login
Related
My code are below
#using (Html.BeginForm("PostUsingParameters", "loopW"))
{
<input type="text" name="num" /><br />
<input type="submit" value="Click Me" />
}
after pressing the button it jumps to the destination page but there is no any CSS effect to the result.
I have tried many ways including using FormMethod.Post new { #class = "example" }. Unfortunately, it’s no use to make the CSS take effect in the destination page. Would appreciate some advice on this problem.
I use .Net 5.0 in my project. Moreover, I want the CSS working on new page after pressing submit button.
<head>
...
<style>
.example {
font-size: 70px;
color: red;
}
</style>
</head>
<body>
<div>
<section>
#using (Html.BeginForm("PostUsingParameters", "loopW", FormMethod.Post, new { #class = "example" }))
{
<input type="text" name="num" /><br />
<input type="submit" value="Click Me" />
}
</section>
</div>
</body>
I created a check box into a div and I created a label.I want that when Ill click to check box(#check_box) that time it (#pop_hidden)will be hidden{display: none}. no problem if I use javascript. I just need a solution
#check_box[type=checkbox]:checked : #pop_hidden {
display: none;
}
<div>
<input type="checkbox" id="check_box">
</div>
<div>
<label id="pop_hidden">CSS is Awesome</label>
</div>
Its Working if I use
<!DOCTYPE html>
<html>
<head>
<style>
#checkbox[type=checkbox]:checked + #pop_hidden {
display:none;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox" name="ossm">
<label id="pop_hidden">CSS is Awesome</label>
</body>
</html>
but I want to use it into the div like the first example
I supppose you are looking for that...
const
checkBox = document.querySelector('#check_box')
, popHiden = document.querySelector('#pop_hidden')
;
checkBox.oninput = e =>
{
popHiden.classList.toggle('noDisplay', checkBox.checked)
}
.noDisplay {
display: none;
}
<div>
<input type="checkbox" id="check_box">
</div>
<div>
<label id="pop_hidden">CSS is Awesome</label>
<br>
other content in div
</div>
I need some help with this code. I'm trying to get the id="address" value into the input named localizacion, I've tried several thing and still didn't find the correct answer, basically what I need is to get the value that shows <div id="address"> and get it into the input field.
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
<head>
<script>
var a = document.getElementById('address').value;
document.forms['formula'].elements['localizacion'].value = a;
</script>
</head>
<div>
<form>
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br />
<label><b>Seleccione su localizacion: </b></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
<br>
</form>
</div>
Screenshot of the issue:
Try this, use
var a = document.getElementById('address').innerHTML;
to get value of address
document.getElementsByName("localizacion")[0].value = a;
to set value of localization
var a = document.getElementById('address').innerHTML;
document.getElementsByName("localizacion")[0].value = a;
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled>
<div id="address">Sample</div>
You can target your form-control class and set it up to be the value of the innerText of the address.
setInterval(function(){
//Update the localizacion box every 0.5 seconds
var a = document.getElementById('address').value;
document.getElementsByClassName("form-control")[0].value = a;
}, 500);
I got rid of the <i> tags. Use CSS instead for the italics. Also removed the <b> tags for the <strong> tags. Hope this helps. Fiddle
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
var a = document.getElementById('address').innerText;
document.getElementsByClassName("form-control")[0].value = a;
//document.forms['formula'].elements['localizacion'].value = a;
#markerStatus{
font-style: italic;
}
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br>
<label><strong>Seleccione su localizacion: </strong></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<strong>Marker status:</strong>
<div id="markerStatus">Click and drag the marker.</div>
<strong>Current position:</strong>
<div id="info"></div>
<strong>Closest matching address:</strong>
<div id="address">Some Address</div>
</div>
<br>
I have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things
I have some problem when i try to change the color of a div using input tags. If the div is in the same section of the inputs it works perfect. But if i try to put the div in the footer, for example, stop working.
HTML:
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
CSS:
.colorDiv{
width:50px;
height:50px;
background-color:red;
}
#select2:checked ~ .colorDiv{
background-color:green;
}
#select3:checked ~ .colorDiv{
background-color:blue;
}
Here is an example: http://jsfiddle.net/cqscc48g
There is any way to achieve that?
Thanks
Css is a cascading renderer. So it follows the DOM element's structure. Therefore, you can only relate elements that are descendants or, at least following siblings.
You have two options:
1 - Adjust your HTML:
You don't even need to put the div inside the input's section. But at least, you'd have to let the inputs out of the section, to make a "nephew" selector. (of course this denomination does not exists ;) )
JsFiddle - Changin HTML
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<footer>
<div class="colorDiv"></div>
</footer>
And then you can select:
#select2:checked ~ footer .colorDiv{
background-color:green;
}
#select3:checked ~ footer .colorDiv{
background-color:blue;
}
2 - Use a Javascript approach:
If you love your HTML structure so much, then you must go Javascript. You can make it a lot sharper, but just an example:
JsFiddle - Using Javascript
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() { ChangeColor(""); }
document.getElementById("select2").onclick = function() { ChangeColor("green"); }
document.getElementById("select3").onclick = function() { ChangeColor("blue"); }
Change your markup and go through comments in code,
.colorDiv {
width: 50px;
height: 50px;
background-color: red;
}
#select2:checked~.colorDiv {
background-color: green;
}
#select3:checked~.colorDiv {
background-color: blue;
}
<section>
<input id="select1" name="test" type="radio" checked />
<label for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label for="select3">Blue</label>
<div class="colorDiv"></div>
<!-- this should be adjacent as per your css selectors -->
</section>
Fiddle
If you want click inside somewhere div and hover any of body div than set input at the top outside..
<style>
input[type=checkbox] {
display:none;
}
input[type=checkbox]:checked ~ div.content{
display:none;
}
</style>
<input type="checkbox" id="toogle-content"/>
<div>
<label for="toogle-content" id="toogle-content">CLICK ME!</label>
</div>
<div class="content">
I can toggle now ;)
</div>
Use .change() for every input. On change check id from clicked input and then change color of that div