The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to make image modal dialog box that is hidden by default.
Tura
post Jan 1 2020, 10:53 AM
Post #1





Group: Members
Posts: 1
Joined: 1-January 20
Member No.: 27,105



Hi!
I m thinking how to make image modal dialog box that is hidden by default, and when open it ( by clicking image) it looks like this: https://gyazo.com/046b88d1c863ff30f37bd404e4a425c8

How to code that? I need to use that animation and modal dialog box for 100 images in my websites.

with regards Tura:)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 1 2020, 07:33 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,541
Joined: 9-August 06
Member No.: 6



CSS + JS. Google javscript css show hide.

Basically you position the box you want to show up where you want it and make it invisible with display: none. Then JS makes the box display: block when the image is clicked and display: none again when the X in the corner is clicked.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th February 2020 - 02:49 PM