Jump to content

Adding Button that opens Lightbox w/ text?

Recommended Posts

3 hours ago, Adrian_ said:

Hi All,

Looking to create a button that says "about me" that when clicked will open a simple light box with some text (maybe an image)? Is this possible? Thanks in advance.

Edit:

Page URL: http://www.adriankern.com 

Have you tried using the form block with lightbox option yet?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

You can also use a Code Block with this below code to achieve this

Demo: https://codepen.io/mlsf/full/WjVZxY

Code

<div class="text">
 <p class="showlightbox" onclick="showLightbox();">Click me to open a lightbox!  </p>
</div>
<div id="lightbox">
  <span class="close" onclick="hideLightbox();">Click me to close the lightbox.</span>
  <div class="container">
  <p>Chase dog then run away woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now kitty poochy mew russian blue, a nice warm laptop for me to sit on. I cry and cry and cry unless you pet me, and then maybe i cry just for fun and sometimes switches in french and say "miaou" just because well why not yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce so purr for no reason or friends are not food. Shove bum in owner's face like camera lens meow but decide to want nothing to do with my owner today paw at beetle and eat it before it gets away. Sit on the laptop poop on grasses yet play time pose purrfectly to show my beauty attack dog, run away and pretend to be victim for sleep on keyboard, and paw at beetle and eat it before it gets away. Find empty spot in cupboard and sleep all day destroy the blinds nap all day. Thug cat . Ears back wide eyed hopped up on catnip, but steal the warm chair right after you get up and with tail in the air have my breakfast spaghetti yarn, wack the mini furry mouse. Eat the fat cats food meow all night having their mate disturbing sleeping humans or destroy couch as revenge, throw down all the stuff in the kitchen, lick yarn hanging out of own butt but destroy couch as revenge, steal the warm chair right after you get up. Gnaw the corn cob. Who's the baby sun bathe throw down all the stuff in the kitchen or spit up on light gray carpet instead of adjacent linoleum so sit on human. Be a nyan cat, feel great about it, be annoying 24/7 poop rainbows in litter box all day curl up and sleep on the freshly laundered towels yet ask to go outside and ask to come inside and ask to go outside and ask to come inside and plan steps for world domination jump around on couch, meow constantly until given food, or hide when guests come over. Caticus cuteicus this human feeds me, i should be a god stare at the wall, play with food and get confused by dust for meow meow, i tell my human, curl up and sleep on the freshly laundered towels. Sun bathe licks your face, but kitty kitty relentlessly pursues moth or leave hair everywhere this human feeds me, i should be a god. Kitty kitty spit up on light gray carpet instead of adjacent linoleum swat at dog roll on the floor purring your whiskers off, and stare out the window so intently sniff hand present belly, scratch hand when stroked. My slave human didn't give me any food so i pooped on the floor spill litter box, scratch at owner, destroy all furniture, especially couch so cats making all the muffins yet bleghbleghvomit my furball really tie the room together, scream for no reason at 4 am for lay on arms while you're using the keyboard. Get video posted to internet for chasing red dot pooping rainbow while flying in a toasted bread costume in space claws in your leg but lick the curtain just to be annoying and chase red laser dot. Kitty kitty steal the warm chair right after you get up lies down climb a tree, wait for a fireman jump to fireman then scratch his face or poop in the plant pot, pee in human's bed until he cleans the litter box. Howl uncontrollably for no reason pushes butt to face or flee in terror at cucumber discovered on floor scratch the box. 

Mrow walk on car leaving trail of paw prints on hood and windshield and decide to want nothing to do with my owner today meowing chowing and wowing so please stop looking at your phone and pet me. Wack the mini furry mouse go into a room to decide you didn't want to be in there anyway immediately regret falling into bathtub. Munch on tasty moths man running from cops stops to pet cats, goes to jail but where is my slave? I'm getting hungry, intrigued by the shower sit on human. Meowzer nap all day pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Poop on grasses. Missing until dinner time roll over and sun my belly, or leave dead animals as gifts see owner, run in terror. Stares at human while pushing stuff off a table find something else more interesting. Rub face on everything scream at teh bath. Pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now ask for petting yet destroy couch as revenge. Eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap. Russian blue chew on cable for make muffins licks your face sit and stare. Sit by the fire kitty poochy so cats go for world domination. Mewl for food at 4am purr yet annoy kitten brother with poking but catch mouse and gave it as a present scratch leg; meow for can opener to feed me. Gate keepers of hell ask for petting ignore the squirrels, you'll never catch them anyway i cry and cry and cry unless you pet me, and then maybe i cry just for fun. Chase red laser dot purr for no reason so kick up litter but meow or chase laser. Cough hairball on conveniently placed pants plop down in the middle where everybody walks licks your face or a nice warm laptop for me to sit on so see owner, run in terror. Gnaw the corn cob chase the pig around the house but refuse to leave cardboard box, but russian blue shake treat bag, or spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce. Cat is love, cat is life stand in front of the computer screen i like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff for scream for no reason at 4 am or peer out window, chatter at birds, lure them to mouth. Mesmerizing birds slap owner's face at 5am until human fills food dish and need to chase tail. Present belly, scratch hand when stroked lick the plastic bag yet eat all the power cords or lie on your belly and purr when you are asleep play time missing until dinner time. Spend all night ensuring people don't sleep sleep all day instantly break out into full speed gallop across the house for no reason my slave human didn't give me any food so i pooped on the floor rub face on everything cat not kitten around . Attack the dog then pretend like nothing happened drink water out of the faucet. Ask for petting. Destroy the blinds drink water out of the faucet. 
  </p>
  <p>
    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff hiss and stare at nothing then run suddenly away, and damn that dog chase the pig around the house eat owner's food cough hairball on conveniently placed pants. Present belly, scratch hand when stroked meoooow eat the fat cats food or spend all night ensuring people don't sleep sleep all day kitty scratches couch bad kitty. Pose purrfectly to show my beauty shove bum in owner's face like camera lens wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again but lay on arms while you're using the keyboard and decide to want nothing to do with my owner today love to play with owner's hair tie so hiss and stare at nothing then run suddenly away. Give me attention or face the wrath of my claws. Chase after silly colored fish toys around the house poop on grasses and sit on human hide at bottom of staircase to trip human and sit in window and stare oooh, a bird, yum swat at dog sit in window and stare oooh, a bird, yum. 
  </p>
  </div>
</div>
<style>
  .text {
    padding: 15% 0;  
}

.showlightbox
  {
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    width: 200px;
    
  }

#lightbox {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  top: 0;
  position: fixed;
  display: none; 
  left: 0;  
  height: 100%;
  border-radius: 2px
}

.container {
  width: 80%;
  background-color: #fff;
  margin: 0 auto;
  height: 300px;
  overflow-y: scroll;
  margin-top: 40px;
  border-radius: 2px;
  padding: 20px;
}

.close  {
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  display: block;
  padding-top: 30px;
  cursor: pointer;
  width: 300px;
  margin: 0 auto;
}
</style>
<script>
  function showLightbox (){
  document.getElementById('lightbox').style.display = "block"; 
};

function hideLightbox () {
  document.getElementById('lightbox').style.display = "none";  
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.