I am new to HTML, CSS... I am creating a custom Popup and it's working properly but I want to be able to close the popup using an icon.
You can find my code below. My custom popup just adds a cross icon at the right side top corner in this popup.
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
left: 50%;
margin-left: -80px;
margin-top: 10px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center">
<h2>Popup</h2>
Click
<div class="popup">
<span class="popuptext" id="myPopup">
<input type="text" size="16"/>
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
First you need to add close icon and call same toggle function on close X icon:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
}
.close{
cursor:pointer;
text-align:right;
display:block;
padding:10px;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
left: 50%;
margin-left: -80px;
margin-top: 10px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center">
<h2>Popup</h2>
Click
<div class="popup">
<div class="popuptext" id="myPopup">
<span class="close" onclick="myFunction()">X</span>
<input type="text" size="16" />
</div>
</div>
</body>
</html>
You just simply need to add a div or span or maybe an anchor tag a that has your close button and then execute the same function, i.e., myFunction(), when that button is clicked. It is done in the following code, its not perfect by CSS, but it works nicely:
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
left: 50%;
margin-left: -80px;
margin-top: 10px;
}
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.close-button {
position: absolute;
right: 0;
top: -10px;
background: #555;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body style="text-align:center">
<h2>Popup</h2>
Click
<div class="popup">
<span class="popuptext" id="myPopup">
<div class="close-button" onclick="myFunction();">x</div>
<input type="text" size="16"/>
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
Related
There is one toggle switch, When click on a toggle it switches ON and popup with close and Ok button appears.
But if I again click on a toggle then it switches off and toggle disappears.
The actual requirement is, with a every click for which the toggle switches ON and popup appears, the toggle switch should not get switch OFF until user click on close button which is present in popup.
http://jsfiddle.net/5rdbe08a/3/
<script>
$(document).ready(function () {
var status = 0;
$(document).on('click', '#isImpliedDelete', function () {
status++;
console.log(status);
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if (status % 2 == 0) {
$("#submitBtn").prop('disabled', false);
} else {
$("#submitBtn").prop('disabled', true);
}
});
$("#isImpliedDelete").click(function () {
$("#myPopup").show();
if ($("#submitBtn").prop('disabled', false) == true) {
$("#myPopup").show();
}
});
$("#ok").on('click', function () {
$("#myPopup").hide()
$("#submitBtn").prop('disabled', false);
});
$("#close").on('click', function () {
if ($("#myPopup").show() == true) {
$("#myPopup").hide();
}
$("#isImpliedDelete").click();
$("#submitBtn").prop('disabled', false);
console.log("close");
});
});
In terms of logic, what you want to do is check first if the modal is visible or not. If it isn't, then the switch should launch the modal. If it's visible, then the switch should remain in it's current state (we'll use e.preventDefault(); to do this).
Here is a modified version of your fiddle:
EDIT2: updated fiddle based on new comment:
http://jsfiddle.net/5fb4xc0L/1/
One observation about your code:
I see that you are using the jquery hide function BUT you are also using separate "show" and "hide" classes to visually toggle the visibility of the modal. You cannot use hide() to hide the element then expect that toggling the class .show to bring it back. Here is an explanation
I didn't understand what you actually want but i just solve your toggle problem. have a look
$(document).ready(function(){
$(document).on('click','#isImpliedDelete',function(){
$(this).attr('disabled', true);
$('#myPopup').addClass('show');
})
$(document).on('click','#ok',function(){
$(this).parents('.popup').next('.input-group-prepend').find('input[type="checkbox"]').prop('checked', false);
$('#myPopup').removeClass('show');
$('#isImpliedDelete').removeAttr('disabled')
})
})
/* Radio Switches */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3c3c3c;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #00afaa;
}
input:focus+.slider {
box-shadow: 0 0 1px #00afaa;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Popup container - can be anything you want */
.popup {
position: relative;
align-content: center;
display: flex;
align-items: center;
display: inline-block;
cursor: pointer;
margin: 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
align-content: center;
visibility: hidden;
width: 396px;
border-style: groove;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 10000;
/* bottom: 25%; */
top: -50px;
left: 310px;
/* margin-left: -180px; */
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
/* left: 50%; */
margin-left: -80px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup visible */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br> <br> <br>
<div class="popup">
<span class="popuptext" id="myPopup">Hello,How are you?
<button id="ok">Ok</button>
<button id="close">Close</button>
</span>
</div>
<div class="input-group-prepend">
<label class="switch">
<input id="isImpliedDelete" name="isImpliedDelete" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<br> <br> <br>
<button class="btn btn-primary btn-block" type="submit" id="submitBtn" >
<i class="fa fa-file-upload mr-2"></i> Button
</button>
Comment down if you want something different from it.
Used e.preventDefault() in click function.
$('#<id>').on(click,function(e){ e.preventDefault(); //Do your task });
i am trying to implement 03 popup on my page but unable to do so. i am trying to achieve this by assigning different ID to each popup. any help is highly appreciated. Here is my code
CSS:
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
font-size:20px;
transition: 1s ease-out;
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Here is my HTML:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
MY JS Code:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunctions(x) {
x.classList.toggle("fa-times-circle");
}
Here i am trying to apply 2nd popup:
<div class="popup" onclick="myFunction()"><i onclick="myFunctions(this)" class="fau fa fa-plus-circle"></i>
<span class="popuptext" id="myPopup2">A Simple Popup 2</span>
</div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
}
</script>
and same for popup three. i am stuck here. Thanks in advance
You can't create more than one function with the same name. However, one solution is create a reusable function and pass the clicked element to it. Then on your popup div also add a data attribute called data-target that holds the ID of the popup you want to open.
For example:
<div class="popup" data-target="myPopup" onclick="myFunction(this)">
or
<div class="popup" data-target="myPopup2" onclick="myFunction(this)">
Then you will only need the below single function, you won't have to duplicate it.
function myFunction(el){
var popup = document.getElementById(el.dataset.target);
popup.classList.toggle("show");
}
I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.
https://www.w3schools.com/howto/howto_js_popup.asp
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>
</html>
Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('show');
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup.show .popuptext {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<h2>Popup</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
Add an onclick to the popup's container and stop event propagation on all internal elements you don't want to trigger the action.
let popup = document.querySelector(".popup");
function toggle(e) {
e.stopPropagation();
popup.classList.toggle("hide");
}
function closePopup() {
if (!popup.classList.contains("hide")) {
popup.classList.toggle("hide");
}
}
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightgray;
display: flex;
flex-direction: column;
justify-content: center;
}
.popup {
width: 100px;
height: 100px;
background: white;
margin: 0 auto;
}
button {
position: fixed;
top: 0;
}
.hide {
display: none;
}
<div class="container" onclick="closePopup()">
<div class="popup hide" onclick="event.stopPropagation()"> </div>
<Button onclick="toggle(event)">Toggle</Button>
</div>
PHP
<?php
echo '<div>Display Content</div>';
echo '<div id="viewcontent"></div>';
?>
Script
Fill the generated content to the inside div
function showcontents()
{
var content = 'Add dynamic content';
$('#viewcontent').html(content);
}
Empty the div content by clicking outside div
$("body").click(function(e)
{
var contentlength = $("#viewcontent").text().length;
if(contentlength > 0 && e.target.id != 'btnshow'){
$('#viewcontent').html("");
}
}
I have the following html and would like to wrap a table cell (1x1, with length and width easily editable) around the onclick function pop-up.
This includes HTML, CSS, and JavaScript.
This may eventually include several columns in one row, with multiple popups, so if possible please make this adaptable.
// When the user clicks on div, open the popup
function myFunction901() {
var popup901 = document.getElementById("myPopup901");
popup901.classList.toggle("show901");
}
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color: #feb330;
"
}
/* The actual popup */
.popup901 .popuptext901 {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup901 .show901 {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<div class="popup901" onclick="myFunction901()"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>
I don't know if is the best way, but i was able to do it declaring "n" inside your function,
function myFunction901(n) {
then for each onclick function in each popup you assing a number,
example:
onclick="myFunction901(1)"
lastly in your function i wrote the element id get as:
var popup901 = document.getElementById("myPopup90"+n);
so it reads that number and get the matching id.
You can then style the popup area with css to make em as you want (more square like etc.).
Check the code below:
<html>
<head>
<style>
/* Popup container - can be anything you want */
.popup901 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
color:#feb330;"
}
/* The actual popup */
.popup901 .popuptext901 {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -31px;
}
/* Popup arrow */
.popup901 .popuptext901::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup901 .show901 {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<table>
<tbody>
<tr>
<td>
<div class="popup901" onclick="myFunction901(1)"> Teams
<span class="popuptext901" id="myPopup901">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(2)"> Teams
<span class="popuptext901" id="myPopup902">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(3)"> Teams
<span class="popuptext901" id="myPopup903">2016, 2018: 22</span>
</div>
</td>
<td>
<div class="popup901" onclick="myFunction901(4)"> Teams
<span class="popuptext901" id="myPopup904">2016, 2018: 22</span>
</div>
</td>
</tr>
</tbody>
</table>
<script>
// When the user clicks on div, open the popup
function myFunction901(n) {
var popup901 = document.getElementById("myPopup90"+n);
popup901.classList.toggle("show901");
}
</script>
</body>
</html>
is this what you meant?
Hi can someone tell me why my solution doesn't work, I would like to hide the scroll of my page when a modals is opened.
and allow the scroll on my modal too.
By the same time if a slide up & down effect could be added it will be awesome.
I used javascript but it doesn't work for me now:
$(function(){
$('.modal').click(function() {
$('body').css({'overflow': 'hidden'});
});
$('.close').click(function() {
$('body').css({'overflow': 'scroll'});
});
});
here is my code:
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3. You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2
Box 2
yadda yadda
</div>
</div>
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
overflow:scroll;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
here is a jsfiddle
http://jsfiddle.net/kodjoe/3Vykc/641/
You are trying to use jQuery, but you never included it. Check out the code below. My approach is a little different from yours. I add and remove class instead of changing css property.
$(function(){
$('.modal').click(function() {
$('body').addClass('scroll');
});
$('.close').click(function() {
$('body').removeClass('scroll');
});
});
.scroll {
overflow: hidden;
}
.modalDialog:target > body { overflow:hidden; }
.modalDialog {
overflow:scroll;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,1);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 100ms ease-in;
-moz-transition: opacity 100ms ease-in;
transition: opacity 100ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > .middle {
width: 80%;
position: relative;
margin: 10% auto;
padding: 10px 20px;
background: #fff;
}
.close {
background: #fff;
color: #000;
line-height: 0px;
text-align: center;
position: absolute;
right: 10px;
top: 20px;
width: 24px;
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<a class="modal" href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
x
<div class="middle">
Modal Box 1
This is a sample modal box that can be created using the powers of CSS3.
You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<a class="modal" href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
X
<div class="middle">
Modal Box 2 Box 2 yadda yadda
<img src="http://teinesantehnika.ee/content/images/thumbs/0022007_apmale-szklana-silver-375-s_500.jpeg">
</div>
</div>
<div style="background:#ccc;height:1500px;"></div>