I want do create a multilanguage site (English and German). The toggle works but I don't know how to get the language in order to select the language and to show the words in the right language.
How can I get the value of the toggle (if posible using PHP and not Javascript)?
Thanks in advance for any help.
--------------------------------
<!DOCTYPE HTML>
<html lang="de" html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="switch">
<input id="language-toggle" class="check-toggle check-toggle-round-flat" type="checkbox">
<label for="language-toggle"></label>
<span id="de" class="on">DE</span>
<span id="en" class="off">EN</span>
</div>
<?php
$lang = "en";
require_once("Language/lang.".$lang.".php");
?>
<p style="font-size:30px;"><?php echo $language["text1"]; ?></p>
</body>
</html>
---------------lang.de.php-------------------
<?php
$language['text1'] = 'Willkommen';
?>
---------------lang.en.php-------------------
<?php
$language['text1'] = 'Welcome';
?>
---------------------style.css-----------------------
.switch {
position: relative;
display: inline-block;
margin: -4px 0px;
line-height:45px;
}
.switch > span {
position: absolute;
top: 0px;
pointer-events: none;
font-family: 'Helvetica', Arial, sans-serif;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
width: 50%;
line-height:45px;
text-align: center;
}
input.check-toggle-round-flat:checked ~ .off {
color: #333;
}
input.check-toggle-round-flat:checked ~ .on {
color: #fff;
}
.switch > span.on {
left: 0;
padding-left: 2px;
color: #333;
}
.switch > span.off {
right: 0;
padding-right: 4px;
color: #fff;
}
.check-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.check-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.check-toggle-round-flat + label {
padding: 2px;
width: 97px;
height: 35px;
background-color: #333;
-webkit-border-radius: 60px;
-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
display: block;
position: absolute;
content: "";
}
input.check-toggle-round-flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #333;
-webkit-moz-border-radius: 60px;
-ms-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
}
input.check-toggle-round-flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 48px;
background-color: #fff;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
-ms-border-radius: 52px;
-o-border-radius: 52px;
border-radius: 52px;
-webkit-transition: margin 0.2s;
-moz-transition: margin 0.2s;
-o-transition: margin 0.2s;
transition: margin 0.2s;
}
input.check-toggle-round-flat:checked + label {
}
input.check-toggle-round-flat:checked + label:after {
margin-left: 44px;
}
Related
I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
I am working on a simple login page with a login form. When i added < !DOCTYPE HTML>, the input field sketched further than the container when set to 100% width. I have searched for solution and noticed questions asked consider doctype messing up css is regarding a specific problem.
Below are my codes;
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 25px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -18px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="application-name" content="">
<title>Member Login</title>
<link rel="stylesheet" href="fonts/FontAwesome/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
<div class="loginbox">
<img class="loginavatar" src="assets/images/user.png" draggable="false" />
<h1>Login Form</h1>
<div class="inputContainer">
<form method="POST" action="">
<!--<p>Username</p>-->
<div class="usernithicon inputBox">
<i class="fa fa-user logico"></i>
<input type="text" id="usern" name="username" required><label for="usern">Username</label></div>
<!--<p>Password</p>-->
<div class="passnithicon inputBox">
<i class="fa fa-lock logico"></i>
<input type="password" id="pswrd" name="password" required><label for="pswrd">Password</label></div>
<input type="checkbox" id="remberme" name="remember"><label for="remberme">Remeber Me</label>
<input type="submit" name="" value="Login">
Forgot password?<br>
Create An Account
</form>
</div>
</div>
</body>
</html>
When this renders in browser the username and password input field will become stretched and i was able to use width:90%;, which works fine but i would love to have it set to width:100%; (which works perfectly without added the doctype tag) but when the doctype code is added, it becomes stretched.
Additional Issue: The background image i added to the body wont cover the whole screen, it breaks in the middle and repeat. i tried adding background-repeat:none; but didn't work. but if i remove the doctype tag, the background fills up the page as expected.
How do i solve this?
base on what you want i added display: inline-flex; in your input wrappers
Try this
.loginbox {
width: 320px;
height: 440px;
background: #000;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.loginbox {
width: 450px;
height: 480px;
padding: 90px 30px;
}
.inputContainer input {
margin-bottom: 30px;
}
}
.loginavatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
.loginbox h1 {
font-size: 22px;
text-align: center;
margin: 0;
padding: 0 0 20px;
}
.inputContainer input {
margin-bottom: 20px;
}
input:-webkit-autofill {
-webkit-text-fill-color: #ffffff !important;
transition: background-color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
}
.inputContainer input[type="text"],
input[type="password"] {
width: 100%;
height: 42px;
background: transparent;
color: #fff;
font-size: 14px;
font-family: inherit;
font-weight: 400;
border: none;
border-bottom: 1px solid #333;
outline: none;
padding-left: 20px;
}
.logico {
position: absolute;
top: 20%;
}
.usernithicon,
.passnithicon {
position: relative;
display: inline-flex;
align-items: baseline;
width: 100%;
}
.inputContainer input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:focus,
input[type="password"]:focus {
border-bottom: 1px solid #bc2333;
}
.inputContainer .inputBox label {
position: absolute;
top: 0;
left: 10%;
padding: 15px 0 0 0;
font-size: 14px;
pointer-events: none;
transition: .5s;
}
.inputContainer .inputBox input:focus~label,
.inputContainer .inputBox input:valid~label {
top: -22px;
left: 10%;
font-size: 12px;
color: #bc2333;
}
input[type=checkbox]+label {
display: block;
margin: 3px 3px 20px;
cursor: pointer;
padding: 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2714";
border: 1px solid #fff;
border-radius: 0.2em;
display: inline-block;
width: 1em;
height: 1em;
padding-left: 0.2em;
padding-bottom: 0.3em;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
input[type=checkbox]+label:active:before {
transform: scale(0);
}
input[type=checkbox]:checked+label:before {
background-color: #bc2333;
border-color: #bc2333;
color: #fff;
}
input[type=checkbox]:checked:disabled+label:before {
transform: scale(1);
background-color: #bc2333;
border-color: #bc2333;
opacity: 0.5;
}
input[type=checkbox]:disabled+label:before {
transform: scale(1);
border-color: #fff;
opacity: 0.2;
}
.inputContainer input[type="submit"] {
width: 100%;
height: 48px;
background: #bc2333;
color: #fff;
font-size: 16px;
font-weight: 500;
font-family: inherit;
border: 0;
outline: none;
}
.inputContainer input[type="submit"]:hover {
cursor: pointer;
background: #7a091f;
transition: .3s ease;
}
.inputContainer a {
color: #fff;
display: block;
text-decoration: none;
text-align: center;
}
.inputContainer a:hover {
color: #f4f4f4;
transition: .2s ease;
}
For the background try this
body, html{
height: 100%;
background-image: url('your_image_path')
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
This question already has an answer here:
Content appearing behind fixed header
(1 answer)
Closed 5 years ago.
In my project I use headers that are included in the webpage via php's include function. Then adding the page content I noticed that the code written in the page itself isn't added after the header but behind it.
here's the sample page's code:
<?php
require_once '../WebServices/functions.php';
sessionManager();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../style.css">
<title>DevLancer - Developer jobs for freelancers</title>
</head>
<body>
<?php
if (isset($_SESSION["USER_ID"])) {
require_once '../includes/header_signed-in.php';
} else {
require_once '../includes/header.php';
}
?>
<form class="create-roject">
<input type="text" placeholder="project name"><br>
<textarea></textarea>
</form>
<script type="text/javascript" src="/scripts.js"></script>
</body>
</html>
and here's the header file:
<header class="header-full">
<img class="logo" alt="logo" src="/Media/devlancer_vertical.png">
<div class="header-content">
<nav class="header-top">
<ul class="left-nav">
<li>
Post A Project
</li>
<li>
Find work
</li>
</ul>
<ul class="right-nav">
<li>
Become a member
</li>
<li>
Already a member? Log In
</li>
</ul>
</nav>
<nav class="header-bottom">
<ul class="left-nav">
<li>
<a>FAQ</a>
</li>
<li>
<a>Community</a>
</li>
<li>
<a>Blog</a>
</li>
<li>
<a>About Us</a>
</li>
</ul>
<ul class="right-nav">
<li>
<a class="header-contactus">Contact Us</a>
</li>
<li class="header-social">
<!--add social media links here-->
</li>
</ul>
</nav>
</div>
</header>
<?php
require_once '../includes/frmLogin.php';
require_once '../includes/frmRegister.php';
?>
and here's the styling of the header (scss):
.header-full {
width: 100%;
position: fixed;
top: 0px;
height: 128px;
left: 0px;
box-shadow: 0 0 4px 0 rgba(0,0,0,.08), 0 2px 4px 0 rgba(0,0,0,.12);
.logo {
position: absolute;
display: inline;
margin: 0px 50px;
height:128px;
width: 128px;
background-color: red;
}
.header-content {
display: inline-block;
position: absolute;
left: 229px;
border-left: solid 1px #ececec;
top: 0px;
width: calc(100% - 230px);
height: 128px;
.header-top {
display: block;
width: 100%;
height:87px;
border-bottom: solid 1px #ececec;
.nav {
top:0;
margin: 0;
padding: 0;
height: 87px;
list-style-type: none;
padding-left: 40px;
li {
position: relative;
top: -32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
margin-right: 20px;
height: 87px;
input[type="search"] {
position: relative;
padding: 10px;
border-style: solid;
border-color: #0fa20f;
border-width: 3px;
border-radius: 10px;
font-size: 16px;
font-family: sans-serif;
top:-5px;
}
img {
position: relative;
top: 0;
display: inline;
padding: 0;
height: 87px;
border-radius: 50px;
}
img:hover {
cursor:pointer;
}
a:link {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
}
}
.left-nav {
display: inline;
float:left;
vertical-align: middle;
list-style-type: none;
margin: 0;
li {
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 20px;
margin-right: 20px;
a:link {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: black;
animation-name: green2black;
animation-duration: .5s;
}
}
}
.right-nav {
display: inline;
float:right;
padding-right: 40px;
vertical-align: middle;
list-style-type: none;
margin: 0;
li {
padding: 10px;
border-style: solid;
border-color: #0fa20f;
border-radius: 15px;
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
animation-name: border-black2green;
animation-duration: .5s;
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: #0fa20f;
}
a:active {
text-decoration: none;
color: black;
}
}
li:hover {
padding: 10px;
border-style: solid;
border-color: black;
border-radius: 15px;
position: relative;
top: 32px;
bottom: 32px;
display: inline;
font-family: sans-serif;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
animation-name: border-green2black;
animation-duration: .5s;
a:link {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:visited {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:hover {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
a:active {
text-decoration: none;
color: #0fa20f;
animation-name: black2green;
animation-duration: .5s;
}
}
}
}
.header-bottom {
display: block;
width: 100%;
height: 41px;
.left-nav {
display: inline;
float: left;
margin: 0;
li {
top: 11px;
bottom: 11px;
position: relative;
display: inline;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
margin-left: 20px;
margin-right: 10px;
}
}
.right-nav {
display: inline;
float: right;
margin: 0;
padding-right: 40px;
padding-left: 0;
li {
top: 11px;
bottom: 11px;
position: relative;
display: inline;
font-family:sans-serif;
font-size: 16px;
font-weight: bold;
margin-left: 10px;
margin-right: 10px;
}
}
}
}
}
I checked everything including z-index and searched the web for similar cases. please help!
found the error: as the header set to fixed it is being removed from the page flow. just added "margin-top: 128px" and everything is fixed. also discovered that it's a duplicate of this question.
How would I do it so when my model opens, it doesn't automatically scroll me all the way to the bottom of the page
<style>
body {
color: #333;
height: 80em;
z-index: 1000;
}
.wrap {
padding: 40px;
text-align: center;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
padding: 8px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
.thebutton {
display: inline-block;
color: #fff!important;
padding: 6px 12px!important;
border-radius: 5px;
box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3);
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
margin-top: 3px;
font-size: 11px;
text-shadow: 0 1px #333;
font-weight: 700;
margin-right: 5px
}
.yes {
background-color: #00813e;
border-color: #8eda55;
float: right
}
.yes:hover {
background-color: #00ab54;
border-color: #b9f373
}
.no {
background-color: #c6165f;
border-color: #f57aad;
float: right
}
.no:hover {
background-color: #d45087;
border-color: #f89dc2
}
#close {
display: none;
}</style>
and also how would I go about aligning the yes and no boxes shown below to the right that say YES and NO without the text affecting them like when I type more text, the box expands
<div class="modal" id="confirm" aria-hidden="true">
<div class="modal-dialog">
<div class="contentHeader headerRed">
<div class="inside">
FOOKIN MODAL BOX M8
</div>
</div>
<img src="https://avatar-retro.com/habbo-imaging/avatarimage?figure=<?php
echo mysql_result(mysql_query("SELECT look FROM users WHERE id = '" . $_SESSION['user']['id'] . "'"), 0);
?>&direction=2&head_direction=3&gesture=sml&action=wav" align="left">
<br>
Hey there <b>{username}</b><br>Are you sure you want to<br> sign out of the hotel??
<br/><div class="thebutton yes">YES</div><br><br><br> <div class="thebutton no">NO</div>
</div>
</div>
For positioning the modal, you are using:
.modal-dialog {
top: -100%;
}
Try adjusting that.
As far as the buttons, remove the <br>'s and then either float the buttons or change their display to inline-block.
am using the following code to create popup and when popup appears link in parent window are active *how do i make the parent page inactive while popup active
CSS
.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1;}
.popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3;}
h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
.mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
HTML
<div class="popup">
<h3>Select Your City</h3>
<a href="#" class="close"
onclick="document.querySelectorAll('.popup')[0].style.display = 'none';
document.querySelectorAll('.mask')[0].style.display = 'none';
return false;">×</a>
<p><h4>Major City's</h4>
</p>
</div>
only popup should be active all the other should be inactive
Here is a jQuery solution.
<style>
.popup { position: fixed;background: rgba(255,255,255,.6); left: 25%; top: 25%; width: 50%; height: 350px; margin-top: -75px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px;index: 1; box-shadow: 2px 2px 10px rgba(0,0,0,0.6); }
.popup .close {position: absolute; right: -5px; top: -5px; text-decoration: none; background-color: #c41e1e; color: #fff; line-height: 1; border-radius: 50px; width: 1em; text-align: center; z-index: 3; cursor: pointer; padding: 2px 3px 3px 3px; }
.popup .close:hover { background-color: #888; }
h3 {margin: 0; padding: 5px 10px; background-color:#8AC007;}
.mask {background-color: #000; z-index: 1; position: absolute; width: 100%; height: 100%; opacity: 0.5;}
#supawrap { display: none; height: 100%; width: 100%; position: absolute; background-color: rgba(0,0,0,0.8); top: 0; left: 0; }
</style>
HTML
<div id="supawrap">
<div class="popup">
<h3>Select Your City</h3>
<div class="close">×</div>
<p><h4>Major City's</h4>
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#supawrap').fadeIn('fast');
$('.close').click(function() {
$('.popup').fadeOut('fast');
$('#supawrap').delay(300).fadeOut('fast');
});
});
</script>
#Overlay{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
opacity:0;
z-index:2; //lower than your pop up
background-color:#222;
background-color:rgba(0,0,0,0.8);
overflow:hidden;
display:none;
}
make display:block; where you give link to pop up