Develop Reference

JS/AngualarJS/Jquery/CSS Minimize Maximize Window

I am trying to understand how to make my current 'modal' code allow for a minimize and maximize button where the modal would minimize to the bottom of the screen when clicking the - button and in the little rectangle at the bottom allow for clicking the + button to bring it back.
Basically I want it to work the same as a browser where you minimize things to the bottom of the desktop, but in this case our application.
HTML
<button id="phq_btn" ng-click="openModalBtn('phq_modal','modal-overlay')">PHQ Open Modal</button>
<div id="modal-overlay">
<!--PHQ Modal-->
<div id="phq_modal" class="modal">
<!-- PHQ Modal content -->
<div class="modal-content">
<!--Allow Scroll-->
<div class="modal-scroll">
<!--Allow Dragging of Header-->
<div class="modal-header">
<div layout ="row" class="titleHolder" style ="height: 25px; width: 100%" >
<div layout="column" flex="33">PHQ-9</div>
<div layout="column" style="color: rgb(255, 255, 255)" layout-align="end end" flex="100"><span ng-click="closeModalBtn('phq_modal','modal-overlay')" style="margin-bottom:7px" class="close">×</span></div>
</div>
</div>
CONTENT GOES HERE.
</div>
</div>
</div>
</div>
CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
z-index: 999;
/*
background-color: rgb(0,0,0); /* Fallback color
background-color: rgba(0,0,0,0.4); /* Black w/ opacity
*/
}
/* Modal Content/Box */
.modal-content {
padding: 10px;
background-color: #fefefe;
margin: 5% auto; /* 15% from the top and centered */
border: 1px solid #888;
border-radius: 10px;
height: 70%;
width: 80%; /* Could be more or less, depending on screen size */
pointer-events:all;
z-index: 999;
}
/* Modal Scroll Content*/
.modal-scroll {
overflow-y: scroll !important;
background-color: #fefefe;
height: 100%;
width: 100%;
pointer-events:all;
}
.modal-header{
cursor: pointer;
}
/* The Close Button */
.close {
color: #f7f3f3;
float: right;
font-size: 28px;
font-weight: 600;
cursor: pointer;
height: 15px;
width: 20px;
text-align: right;
pointer-events:all;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
.modal-overlay-on {
z-index: 1000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
opacity: 1;
pointer-events: none;
cursor: default;
}
JS
//Open Modal
$scope.openModalBtn = function(modal,overlay){
eval(modal + '.style.display = "block"');
eval("$('#" + overlay + "').addClass('modal-overlay-on')");
};
//Close Modal
$scope.closeModalBtn = function(modal,overlay){
eval(modal + '.style.display = "none"');
eval("$('#" + overlay + "').removeClass('modal-overlay-on')");
};
//Drag Modal
$(".modal").draggable({
handle: ".modal-header"
});
//Disable Click outside of Modal
window.onclick = function(event) {
if (event.target == phq_modal) {
phq_modal.style.display = "none";
}
};

How can I create a log in and sign up form in on modal also when I submit it the modal stay?

I have a modal that contains login form and the register form. I want to hide the registration first so that the log in form is the one they will see first, then when they click the registration label on the top the form will change in to my registration form. I had a code that worked however when I refresh the page and open the modal the both log in and register is displayed together. How can I hide the registration form and also how to submit the form that the modal will still open when reloaded?
Here is what I am talking about
$(".lgn").on('click', function() {
$("#login-form").fadeIn();
$("#registration-form").fadeOut();
});
$(".rgs").on('click', function() {
$("#registration-form").fadeIn();
$("#login-form").fadeOut();
});
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 4; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: -10;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}
.modal-header {
width: 100%;
font-family: Arial;
}
.con-logreg {
display: flex;
flex-direction: row;
}
.con-logreg .registration {
display: none;
}
.modal-header .toggle {
text-decoration: none;
color: #000000;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #ffffff;
margin: auto;
padding: 15px;
width: 20%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: center-modal;
animation-duration: 0.5s;
border-radius: 10px;
}
#keyframes center-modal {
from {
transform: scale(0.1);
opacity: 0.1;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal p {
color: #555555;
font-size: 14px;
font-family: Arial;
}
.modal a {
color: #4f6ed1;
text-decoration: none;
}
/* The Close Button */
.close {
float: right;
}
.close:hover,
.close:focus {
color: rgb(189, 189, 189);
text-decoration: none;
cursor: pointer;
}
form {
transition: all 4s ease-in-out;
}
.form-control {
width: 100%; /* Full width */
padding: 10px; /* Some padding */
box-sizing: border-box; /* Make sure that padding and width stays in place */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
display: block;
margin: 0 auto;
border: 0;
background-color: #ebebeb;
font-size: 15px;
}
.form-control-signup {
margin: 10px 0;
width: 100%; /* Full width */
padding: 10px; /* Some padding */
box-sizing: border-box; /* Make sure that padding and width stays in place */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
display: block;
border: 0;
background-color: #ebebeb;
font-size: 15px;
}
form .submit {
width: 100%;
background-color: #0f66c9;
color: white;
font-size: 15px;
cursor: pointer;
border-radius: 5px;
margin: 10px 0;
border: none;
transition: 0.5s ease;
}
.submit:hover {
transition: 0.5s ease;
background-color: #032f61;
transform: scale(1.1);
}
.submit-signup {
background-color: #0f66c9;
width: 85%;
height: 5%;
border: none;
cursor: pointer;
margin: auto 70px;
color: white;
transition: 0.5s ease;
}
.submit-signup:hover {
transition: 0.5s ease;
background-color: #032f61;
transform: scale(1.1);
}
<!-- Trigger the modal with a button -->
<div class="desc">
<div class="tooltiplgn">Ratings is highly appreciated</div>
<button class="login" type="button" data-toggle="modal" data-target="#Loginmodal"><span><i class="fas fa-sign-in-alt"></i></span>Feedback</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</div>
<!-- Modal -->
<div class="modal fade" id="Loginmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<a class="toggle lgn" id="active" href="#login-form" data-box="login-form">Login</a>
<a class="toggle rgs" href="#registration-form">Registration</a>
</div>
<div class="con-logreg">
<div id="login-form" class="registration">
<form action="" id="contact-form" method="post">
<b><p>Email</p></b>
<input type="text" name="email" class="form-control" placeholder="Username/Email" required>
<b><p>Password</p></b>
<input type="password" class="form-control" placeholder="Password" required>
<p>Don't have account yet? Signup</p>
<input type="submit" name="submit" value="Submit" class="form-control submit">
</div>
</form>
<div id="registration-form" class="login-form">
<form action="Includes/signup.inc.php" method="post">
<p>Name</p>
<input type="text" name="name" class="form-control-signup" placeholder="Enter your full name" required>
<p>Username</p>
<input type="text" name="username" class="form-control-signup" placeholder="Enter your valid username" required>
<p>Email</p>
<input type="email" name="email" class="form-control-signup" placeholder="Enter your valid Email" required>
<p>Password</p>
<input type="password" name="pwd" class="form-control-signup" placeholder="Enter a strong password" required>
<p>Re-enter password</p>
<input type="password" name="pwdrepeat" class="form-control-signup" placeholder="Re-enter password" required>
<button class="submit-signup" type="submit" name="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

try my snippet i have edited yours, sorry was having to much work so wasn't able to answer through mob, anyway i hope that's what exactly u need
$(".lgn").on('click', function() {
$("#login-form").fadeIn();
$("login-form").css('display', 'block');
$("#registration-form").fadeOut();
$("#registration-form").css('display', 'none');
});
$(".rgs").on('click', function() {
$("#registration-form").fadeIn();
$("#registration-form").css('display', 'block');
$("#login-form").fadeOut();
$("#login-form").css('display', 'none');
});
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 4; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
bottom: -10;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
}
.modal-header {
width: 100%;
font-family: Arial;
}
.con-logreg {
display: flex;
flex-direction: row;
}
.con-logreg .login {
display: none;
}
.con-logreg .registration {
display: none;
}
.modal-header .toggle {
text-decoration: none;
color: #000000;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #ffffff;
margin: auto;
padding: 15px;
width: 20%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: center-modal;
animation-duration: 0.5s;
border-radius: 10px;
}
#keyframes center-modal {
from {
transform: scale(0.1);
opacity: 0.1;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal p {
color: #555555;
font-size: 14px;
font-family: Arial;
}
.modal a {
color: #4f6ed1;
text-decoration: none;
}
/* The Close Button */
.close {
float: right;
}
.close:hover,
.close:focus {
color: rgb(189, 189, 189);
text-decoration: none;
cursor: pointer;
}
form {
transition: all 4s ease-in-out;
}
.form-control {
width: 100%; /* Full width */
padding: 10px; /* Some padding */
box-sizing: border-box; /* Make sure that padding and width stays in place */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
display: block;
margin: 0 auto;
border: 0;
background-color: #ebebeb;
font-size: 15px;
}
.form-control-signup {
margin: 10px 0;
width: 100%; /* Full width */
padding: 10px; /* Some padding */
box-sizing: border-box; /* Make sure that padding and width stays in place */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
display: block;
border: 0;
background-color: #ebebeb;
font-size: 15px;
}
form .submit {
width: 100%;
background-color: #0f66c9;
color: white;
font-size: 15px;
cursor: pointer;
border-radius: 5px;
margin: 10px 0;
border: none;
transition: 0.5s ease;
}
.submit:hover {
transition: 0.5s ease;
background-color: #032f61;
transform: scale(1.1);
}
.submit-signup {
background-color: #0f66c9;
width: 85%;
height: 5%;
border: none;
cursor: pointer;
margin: auto 70px;
color: white;
transition: 0.5s ease;
}
.submit-signup:hover {
transition: 0.5s ease;
background-color: #032f61;
transform: scale(1.1);
}
<!-- Trigger the modal with a button -->
<div class="desc">
<div class="tooltiplgn">Ratings is highly appreciated</div>
<button class="login" type="button" data-toggle="modal" data-target="#Loginmodal"><span><i class="fas fa-sign-in-alt"></i></span>Feedback</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</div>
<!-- Modal -->
<div class="modal fade" id="Loginmodal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<a class="toggle lgn" id="active" href="#login-form" data-box="login-form">Login</a>
<a class="toggle rgs" href="#registration-form">Registration</a>
</div>
<div class="con-logreg">
<div id="login-form" class="login">
<form action="" id="contact-form" method="post">
<b><p>Email</p></b>
<input type="text" name="email" class="form-control" placeholder="Username/Email" required>
<b><p>Password</p></b>
<input type="password" class="form-control" placeholder="Password" required>
<p>Don't have account yet? Signup</p>
<input type="submit" name="submit" value="Submit" class="form-control submit">
</div>
</form>
<div id="registration-form" class="registration">
<form action="Includes/signup.inc.php" method="post">
<p>Name</p>
<input type="text" name="name" class="form-control-signup" placeholder="Enter your full name" required>
<p>Username</p>
<input type="text" name="username" class="form-control-signup" placeholder="Enter your valid username" required>
<p>Email</p>
<input type="email" name="email" class="form-control-signup" placeholder="Enter your valid Email" required>
<p>Password</p>
<input type="password" name="pwd" class="form-control-signup" placeholder="Enter a strong password" required>
<p>Re-enter password</p>
<input type="password" name="pwdrepeat" class="form-control-signup" placeholder="Re-enter password" required>
<button class="submit-signup" type="submit" name="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How can I add a Thank you message in a Modal Form and make it responsive?

Right now, I've managed to build a pop up form, but I have two problems.
The form isn't responsive.
Upon filling/submitting the form out - it takes me to a separate
landing page to fill it out again.
Expected Behavior : Instead, I'd like it to just have a message right after submission in the modal. Like "Thank you."
This could be an issue with drip, not sure.
Here's the form code:
<div class="modal" id="myModal">
<!--{cke_protected}{C}%3C!%2D%2D%20Modal%20content%20%2D%2D%3E-->
<div class="modal-content">
<div class="modal-header"><span class="close">×</span></div>
<div class="modal-body">
<form action="https://www.getdrip.com/forms/828915861/submissions" data-drip-embedded-form="828915861" method="post">
<h3 data-drip-attribute="headline">Get a copy of Webinar Promotion Strategies for you to read at your leisure</h3>
<div data-drip-attribute="description"><br></div>
<div><label for="drip-fname">First Name</label><br><input id="drip-fname" data-cke-saved-name="fields[fname]" name="fields[fname]" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><label for="drip-email">Email Address</label><br><input id="drip-email" data-cke-saved-name="fields[email]" name="fields[email]" type="email" value="" data-cke-editable="1" contenteditable="false"></div>
<div aria-hidden="true" style="display: none;"><label for="website">Website</label><br><input autocomplete="false" id="website" data-cke-saved-name="website" name="website" tabindex="-1" type="text" value="" data-cke-editable="1" contenteditable="false"></div>
<div><input data-drip-attribute="sign-up-button" type="submit" value="Download Now" data-cke-editable="1" contenteditable="false"></div>
</form>
</div>
<div class="modal-footer"><button></button></div>
</div>
Here's the CSS styling:
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
flex-direction: column;
align-items: stretch;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 25%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 10px 16px;
background-color: #d6812e;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 10px 16px;
background-color: #d6812e;
}
</style>

Try changing your form tag to this:
<form action="" data-drip-embedded-form="828915861" method="post" onsubmit="alert('Thank You.');" novalidate>

How to fix "Google signin" button style in HTML Page?

I have integrated the google signin button on my html page. but the sign in button doesn't fits into the exact space provided. How can i design custom button for google singin like the above given buttons like Facebook and twitter in the screen shot.
tried placing different button then google singin links doesn't works.
My html and CSS code:
<div class="container">
<form action="/action_page.php">
<div class="row">
<h2 style="text-align:center">Login with Social Media</h2>
<div class="col">
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" class="fb btn" scope="public_profile,email" onlogin="checkLoginState();">
<i class="fa fa-facebook fa-fw"></i> Login with Facebook
</a>
<a href="javascript:void(0);" class="twitter btn">
<i class="fa fa-twitter fa-fw"></i> Login with Twitter
</a>
<a class="google btn">
<div class="g-signin2" data-width="570" data-height="30" data-longtitle="true"></div>
</a>
</div>
</div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>EMail Address</p>
<p id="email" class="alert alert-danger"></p>
<p id="name">
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
CSS:
* {box-sizing: border-box}
/* style the container */
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
/* style inputs and link buttons */
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none; /* remove underline from anchors */
}
input:hover,
.btn:hover {
opacity: 1;
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
.data {
display: none;
}
/* style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Two-column layout */
.col {
float: center;
width: 50%;
margin: auto;
padding: 0 0px;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* vertical line */
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
/* text inside the vertical line */
.inner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
/* hide some text on medium and large screens */
.hide-md-lg {
display: none;
}
/* bottom container */
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 650px) {
.col {
width: 100%;
margin-top: 0;
}
/* hide the vertical line */
.vl {
display: none;
}
/* show the hidden text on small screens */
.hide-md-lg {
display: block;
text-align: center;
}
}

Add text-align: center; to the div containing the google sign in button.

Multiple modals using JS

I have multiple div-containers all containing an image and some text. I want to make modals for all of the images, but I'm stuck getting them to work and I don't know what else I need to change. I'm struggling especially since I also have a settings modal inside of my off canvas menu.
How do I make all of the images work as a modal without losing the Settings off canvas menu? I know I have to change the JS for it to work for class instead of id, but it still doesn't work and I don't know what I'm missing.
<!-- OFF MENU CANVAS JS-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!-- END OFF MENU CANVAS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Begin settings page popup-->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<!-- End settings page popup-->
<!-- Begin img enlargen-->
<script>
// Get the modal
var modal =
this.getAttribute("rel"); document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = this.getAttribute("rel"); document.getElementById('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!--End img enlargen-->
#charset "UTF-8";
/* CSS Document */
header {
z-index: 1000;
width: 100%;
background-color: #5BC2FF;
margin: 0 auto;
position: relative;
box-shadow: 0px 0.5px 2px 0.2px black;
}
/* HEADER */
#airplane {
margin-left: 5px;
display: inline-block;
}
.headertext2 {
z-index: 100;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
display: inline;
margin-left: 8px;
font-size: 30px;
}
/* OFF CANVAS MENU BEGINS*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #5BC2FF;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #586166;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: .5s;
padding: 16px;
display: inline-block;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* OFF CANVAS MENU END*/
body {
background-color: #586166;
height: 1000px;
}
p.div-container {
font-family: 'annie-use-your-telescope', "Arial";
margin-top: 5%;
font-size: 4vw;
}
.pic {
margin-bottom: 10%;
margin-left: 10px;
margin-right: 10px;
padding:1px;
border:1px solid #021a40;
background-color: #FF5B5F;
float: left;
width: 50%;
height: 50%;
}
#FirstPic {
margin-top: 100px;
}
#LastPic {
margin-bottom: 100px;
}
#FirstDesc {
margin-top: 100px;
}
.div-container {
display: flex;
overflow: hidden;
}
.Description {
float: left;
width: 50%;
height: 100px;
color: white;
padding-right: 5px;
}
/*SIGN UP FORM BEGIN*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 8px 12px 5px 3px;
display: inline-block;
}
input[type=submit] {
background-color: #D29E95;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-bottom: 40px;
}
input[type=submit]:hover {
background-color: #FF5B5F;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 30px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/*SIGN UP FORM END*/
.section {
background-color: #5ECCBA;
width: 97%;
white-space: nowrap;
height: 375px;
margin: 85px 1.5% 20px;
padding-bottom: 5px;
float: left;
display: block;
box-shadow: 0px 2px 2px 0.2px black;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 8%;
text-decoration: underline;
font-weight: 400;
color: white;
}
.ages {
float: left;
display: inline;
margin-top: -30px;
margin-left: 50%;
text-align: center;
padding-left:120px;
padding-top: -600px;
font-weight:lighter;
color: white;
}
.col-6 {
text-align: center;
}
.col-3 {
display: inline-block;
padding: 2px 2% 0.5% 2%;
margin: 0% 7%;
width: auto;
height: 30px;
text-align: center;
float: left;
box-shadow: 1px 1px 2px 0.2px white;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 1%;
}
.titles {
margin-left: 25%;
padding-top: 25px;
color: white;
}
.kmtravel {
text-align: center;
margin-left: 25%;
margin-top: -15px;
color: white;
}
.myworld {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 0% 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
border-bottom: medium;
}
#MyMapColours {
background-color: white;
width: 97%;
margin-left: 1.5%;
margin-right: 1.5%;
margin-bottom: 10px;
margin-top: 2px;
display: inline-block;
}
.lefttodiscover {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 10px 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
}
#map {
width:97%;
height:400px;
background:white;
margin: 2px 1.5% 70px;
box-shadow: 1px 1px 2px 0.2px black;
}
/* SETTINGS PAGE BEGINS */
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: white;
box-shadow: 0px -0.5px 2px 0.2px black;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
margin-left:90%;
font-size: 28px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* SETTINGS PAGE END*/
/* ENLARGEN IMAGE BEGIN*/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal2-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal2-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
top: 15px;
right: 35px;
margin-bottom: 20px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
margin-right: 10%;
}
.close2:hover,
.close2:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal2-content {
width: 100%;
}
}
/* ENLARGEN IMAGE END*/
footer {
background: #5BC2FF;
color:white;
height:50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-top: 12px;
text-align: center;
box-shadow: 0px -0.5px 2px 0.2px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Journey</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>
<body><!-- BEGIN BODY-->
<div class="jumbotron-fluid">
<header class="fixed-top">
<!-- OFF CANVAS MENU START -->
<div id="mySidenav" class="sidenav">
×
My Journey
My Account
New Account
My Friends
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<button id="myBtn">Contact</button>
Settings
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Are you having trouble using the app?</h3>
<p>Visit our website www.MyJourney.com<br>
Or contact us at +31 6 12510336</p>
<p>For more information.</p>
</div>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<!-- OFF CANVAS MENU END -->
<div id="airplane"> <img src="img/Airplane logo.png" alt="logoheader" width="40px"> </div>
<h1 class="headertext2">My Trips</h1>
</header>
<div class="div-container">
<div class="pic" id="FirstPic"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
<div class="Description" id="FirstDesc">
<p>KENYA <br>
<i>What:</i> The Big 5 <br>
<i>With:</i> Tom <br>
<i>When:</i> Jan. 2018 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic">
<img id="myImg" src="img/Mirror Lakes.jpg" alt="Mirror Lakes" width="100%" height="100%">
</div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<span class="close">×</span>
<img class="modal-content2" alt="img01"><img class="img01" alt="img01">
<div id="caption"></div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Brazil rock dedo de deus.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BRAZIL <br>
<i>What:</i> Dedo de Deus <br>
<i>With:</i> Barbara & Paul <br>
<i>When:</i> May. 2017 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Sunset orange.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELGIUM <br>
<i>What:</i> Sunset <br>
<i>With:</i> Maya <br>
<i>When:</i> Nov. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Amsterdam.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NETHERLANDS <br>
<i>What:</i> Canals <br>
<i>With:</i> Vera <br>
<i>When:</i> Sep. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Lake Bled Slovenia.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SLOVENIA <br>
<i>What:</i> Lake Bled <br>
<i>With:</i> Silvia & Mark <br>
<i>When:</i> Apr. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Table Mountain.jpeg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SOUTH AFRICA <br>
<i>What:</i> Table Mountain <br>
<i>With:</i> Pauline <br>
<i>When:</i> Aug. 2015 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Mirror Lakes.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic" id="LastPic"><img src="img/Caye Caulker Belize.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELIZE <br>
<i>What:</i> Caye Caulker <br>
<i>With:</i> Romy <br>
<i>When:</i> Oct. 2013 <br>
</p>
</div>
</div>
<footer><!--BEGIN FOOTER-->
Adventure may hurt you but monotony will kill you.
</footer><!--END FOOTER-->
</div><!-- END CONTAINER -->
</body><!--END BODY-->
</html>