CODEWITHSUNDEEP
htmlcssuser-interfacewebuser-experience
Helpme
Helpme

Reputation: 15

how can i make popup Scrollable without having content

well , i am trying to implement the popup where it should have two blank pages, i mean when popup gets opned the popup itself should scroll by two pages.

i have tried but when popup opens and if we try to scroll on that popup the background page scrolls not popup i tried with overflow: auto but it just adjust with the content do popup have but i want popup scrolable without any content any idea?

i have done this

html

<div class="div1"> <div class="div2"> <form></form> </div< </div>

css

.div1{
right: 45px;
font-size: 60px;
cursor: pointer;
height: 100%;
width: 100%;
display: block;
position: fixed;
z-index: 1;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.9);}


.div2{
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 30px;
margin: auto;
}

so this is what i want to show in my popup

thanks for the help in advance

Upvotes: 2

Views: 843

Answers (1)

Nishil Sheth
Nishil Sheth

Reputation: 165

Try using overflow-y to scroll Here is some code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 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;
  height: 50px;
  overflow-y: scroll;
}

/* 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 ;}
}
</style>
</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">Lorem ipsum dolor sit amet. Vel assumenda impedit ad impedit consequatur est iste praesentium. Est itaque veritatis nam nihil ratione aut dolor odio. Quo amet iste id iusto sapiente et quod blanditiis eos velit corrupti! Non omnis atque a quam dolores ut culpa obcaecati aut odit doloribus qui voluptatem mollitia quo laudantium neque.</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>

overflow: auto; is not correct thing to do. Use overflow: scroll; for making it scroll. Also please share the code that you tried.

Upvotes: 2

Related Questions