jQuery image popup

안녕 얘들 아 오늘 우리는 jquery를 사용하여 새로운 것을 배웁니다

첫 번째 수업에서는 팝업을 만드는 방법을 배웠습니다 두 번째 수업에서는 갤러리를 만드는 법을 배웠습니다 오늘이 수업에서 오늘의 아이디어를 만들기 위해 첫 번째 강의와 두 번째 강의에서 아이디어를 얻습니다 이전 동영상의 동영상을 보지 않았다면 시청해야합니다 이미지를 클릭하면 이미지가 페이지 중앙에 표시됩니다

X 또는 화면을 클릭하면 이미지가 닫힙니다 플러그인을 사용하는 많은 사람들, 일반적으로 작업하기 쉬운 플러그인 그러나 코드가 쉽고 프로세스가 쉽다면 왜 플러그인을 사용합니까? 나는 네 손으로 그것을 만드는 것이 더 쉽다 먼저 편집자에게 간다 우리는 2 div를 만들고 첫 번째 div에는 원하는 이미지가 있고 두 번째 div에는 원하는 이미지를 표시하는 상자가 있습니다 첫 번째 div에는 클래스 이름이 있습니다

이 div 안에는 이미지를 넣으십시오 두 번째 div는 클래스 이름이 show입니다 이 div 안에 2 div를 넣고, 먼저 클래스 이름 오버레이가 있습니다 다른 div에는 img show라는 클래스 이름이 있습니다 이 div 안에 스팬과 빈 이미지를 넣으십시오

스팬은 닫기 기호를 나타내는 X 기호를 포함합니다 클릭 할 때 소스로 이미지를 대체 할 빈 이미지 이제는보기가 좋지 않아서, 우리는 CSS로 html을 편집합니다 팝업 크기는 900px이고 중간 페이지에 표시하고 싶습니다 팝업창 안에 img를 만들려면 너비와 높이가 200px가되어야합니다 충분히 그 🙂 이제 우리가 원하는 것처럼보기가 더 좋습니다

이제는 이미지를 클릭하면 페이지 중간에 이미지가 표시됩니다 나는 css에서 편집을한다 그에게 쇼를 보이게하고 그를 숨길 수있는 디스플레이가없고 이미지 쇼를 클릭했을 때 Z- 인덱스 999를 사용하여 페이지의 모든 콘텐츠 위에 올리기 나는 그에게 아무 편지도 보이지 않게한다