Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

How can I create a popup window with text?


njrusso7

Question

  • Answers 50
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Help please! This is the site I am working on:http://www.powersoccerteamusa.net/teamusa/ I am trying to make it so when you click on an athlete's image, a window will pop open that will show their b

@njrusso7 Hopefully the answer I provided gives you want you want. STEP 1 For the page you want to have the Lightbox on (ex. Bio page), click the gear icon for that page’s settings, then click the

Recommended Posts

  • 0

This code is awesome and very grateful for it.However, does anyone know how to turn it off for mobiles, as I can’t get it to display correctly - the X to close the window is out of view

Link to post
  • 0

@kabodhi

I've come across some lightboxes that won't show the X to close if it has a lot of content and uses bullet points. I used some CSS to fix this issue. I'm not sure what your lightboxes look like but if you want to include a link, I can take a look.

In order to hide them on Mobile, you can use some JavaScript (hopefully someone on here can provide details on what to include for this to happen) OR you can duplicate the code you have to show a lightbox, remove the link to the lightbox, and use some HTML & CSS to show one for Deskopt and show the one for Mobile.

Link to post
  • 0

@kenwestphal you mentioned in the comment above that you would post how to add a button/link to close the Lightbox in another post, but I can't find it. Would you please provide a link to the post? Thank you!

Link to post
  • 0

@aarnaa

I completely forgot about this so thank you for reminding me. See below for


 <div style="display:none;">
<div id="bio-john">
  <h1>
    Title of Lightbox
  </h1>
  <img src="http://www.imageurl.jpg"/>
<p>
  Insert the bio text here
</p>
  <p>
    <a href="#" id="close_button">Close</a>
  </p>

  </div>
  </div>
<script>
// Close Button featherlight

jQuery(document).on('click','#close_button',function(){
   console.log("test");
   jQuery('.featherlight').click();
});
</script>


Link to post
  • 0

Thanks so much for the code @kenwestphal ! Much appreciated!

When I click the "Close" link it jumps the page back up to the top. Is there a way to have the close link work the same as the "x" in the upper right, so the page stays where it is when you close the pop-up rather than jump to the top?

My site is here, and I have the Close link at the bottom of the first "LEARN MORE" popup in the "Therapeutic Pipeline" section. (temporary password is "chrono2017")

Thank you!

Link to post
  • 0

Hi @kenwestphal

Thank you for this - still very useful 2 years later! I am having the same problem as the user above and adding the / does not fix the issue. When I add the /, it no longer jumps to the top of the page but also does not show a lightbox. Do you have any other suggestions?

Edited by djonn
Initial Revision
Link to post
  • 0

@kenwestphal

It works now, thank you so much! Is there a way to adjust the size of the image when it's an image lightbox? When the image pops up right now, it's very large. I've tried

.featherlight .featherlight-content{max-width: 500px;}

in the Custom CSS tab but this only adjusts the text in the lightbox, not the image.

Link to post
  • 0

@djonn

Glad it works. You can try to add that CSS code to the image. So for example, the code for the image in the lightbox might be


<img style="max-width:500px;" src="images/myimage.jpg" alt="Image of Cosmo Kramer">




Edited by kenwestphal
Initial Revision
Link to post
  • 0

Hi! I am using this code now, and I am not a developer so my skills are basic, but now I have created a button "Denial", with which I want it to click through to a popup window which defines denial (I will do this with all of the stages of grief). I am only at the first of five and already at a loss.

Anyway, the popup window appears but is very small, with the X button in the top right corner, but the text does not appear. Is there something I am doing wrong?

Thanks in advance for any help in the matter.

Link to post
  • 0

Hi @kenwestphal I actually got the text to work now, so no worries on that one, i didn't realise code was case-sensitive.

However, my boss now wants something more advanced which is to add music into a pop up window. This can simply be a music box on the popup but i don't know how to go about that in code.

Is this possible and if so, do you know how to do something like that? Thank you so much in advance. Sam

Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...