I build a website with HTML/CSS & JavaScript and added a modal with Bootstrap 5. I changed the standard "Save changes" button of bootstrap with JavaScript to display a random image inside the modal. When the random image gets displayed inside the modal the one image i have displayed on the website disappears.
Does anyone know how to change the code so that the image on the website does not disappear while the random image gets displayed inside the modal?
I tried to change the position and the z-index of the website image in CSS but it still happened to disappear.
I'm not sure without seeing your code.You can try changing the css of the element when you open and close the modal.
document.getElementById("HtmlElementId").className = "CSS-SelectorNewStyle";
Related
I have a photo gallery which is displayed in modal (the gallery uses SplideJS and I particularly use the Thumbnails one).
I have also the same clickable photos previews on the webpage.
The gallery modal is opened simply by clicking any of the preview photos. This works fine, but in the modal gallery I also want the focus on the exact same photo as clicked in preview.
I was trying to look inside the SplideJS code, but it seems to work with positioning, which is probably not usable for me.
I have a section of a div container text that I'm trying to 'preview' another page, or at least show it when the mouse is over specific text - I don't want the actual text to be clickable since I need it to remain on the 'main' page
I've messed around using some custom CSS's to 'preview' data, locally, and provide a remote img src, but I cannot seem to find any examples to do this for a page.
You can get thumbnails of those pages that you want to show and when they hover that text you can show them that thumbnails. Tt is kind of tricking user since they are not actually seeing the page.
I created some widgets in my Wordpress theme, I want create representation for some of my widget fields, For example I create Twitter widget, it is contain the VIDEO_ID field, I created link named (info),
I want when anyone don't Know how get twitter VIDEO_ID, Then click on (info) link, to show it the explanation image on screen without refresh page.
How I can Show images by clicking on info link to show images without refresh the page and then click on close button to close the image?
use a Modal to present your image.
You can refer to bootstrap modal http://www.w3schools.com/bootstrap/bootstrap_modal.asp
I have been working on a e-commerce site to show the images of a product however i am having some trouble.
I am using colorbox to show the image in a popup window my code for that is:
jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
With my links looking like this:
<a class="largeImgPop" href="/img1.jpg">test1</a>
<a class="largeImgPop" href="/img2.jpg">test2</a>
<a class="largeImgPop" href="/img3.jpg">test3</a>
When i click on either test1, test2 or test3 it is showing the correct image however it does not show the previous and next button to navigate between the three. Any ideas?
My guess is that you have missed one of these 2 things.
Not copied the colorbox images into your project
Or
Copied them into your project but forgotten to update the CSS file to point the images to the right location.
The reason i wasnt seeing the previous and next buttons was because of the z-index. The buttons were hidden behind the image that was being shown within colorbox. To fix this i increased the z-index of the buttons within the css of colorbox and then repositioned them to where I wanted them
To learn more about z-index click below:
Click Here for z-index
I have the some text loaded in light box with background faded.
i want the print button in the light box so that when user click on that only the contents of light box is printed and printer box opens up.
How to do that??
Have you tried using a print stylesheet?
Basically when it prints use a css stylesheet to hide everything that is not in the lightbox.
CSS Design: Going to Print
When you open up your lightbox you want to add a print stylesheet that hides everything else but what is in the lightbox. When you close the lightbox remove that stylesheet.