이미지를 팝업으로 표시 페이지로드시

나는 PHP를 배우고 있으며 자바 스크립트에 익숙하지 않다. 하지만 일부 텍스트 및 이미지가있는 팝업을 생성하는 방법을 알고 싶습니다. (HTML 형식이 허용되는 경우 나에게 도움이됩니다.)이미지를 팝업으로 표시 페이지로드시

페이지가로드 될 때마다 팝업 메시지를 생성하고 싶습니다. 예 : www .000webhost.com, 우리는 000webhost.com의 홈페이지를 열거 나 새로 고침 할 때마다 이미지가 표시됩니다. 어떻게 할 수 있습니까?

출처

2013-10-06 John Smith

표시 할 내용이있는 적절한 html 컨테이너를 만들고 css로 스타일을 지정한 다음 display: none 속성을 추가하십시오. 그리고 귀하의 자바 스크립트는 다음과 같이 간단합니다 :

document.addEventListener('DOMContentLoaded', function(){ 
    var popup = document.querySelectorAll('[your element selector]')[0]; 
    popup.style.display = 'block'; 
}, false);

또한 닫을 수있는 능력을 추가해야하지만 이것은 귀하의 질문의 범위가 아닙니다. 그리고 나는 불필요한 큰 UI 라이브러리에 반대합니다. 매우 단순한 모달을 아주 간단하게 만들고 더 많은 소스 코드를 제공 할 수 있습니다. 그것은 단지 오버 헤드 일뿐입니다.

출처

2013-10-06 16:45:16 lukaleli

lightbox 플러그인 중 하나를 사용하는 것이 좋습니다. 간단하고 사용하기 쉽고 최소한의 javascript 또는 jquery 지식이 필요합니다.

출처

2013-10-06 16:47:19

항상 jQuery ui 팝업을 사용합니다. 나는 당신을 위해 실천 예제를 만들었습니다. http://jsfiddle.net/8kAJr/

div 안에 html 콘텐츠를 추가하십시오. jQuery UI에 대한 자세한 내용은 http://jqueryui.com/dialog/

출처

2013-10-06 16:51:14 Rajesh

이 잠자기의 질문에 게시하는 것에 유감스럽게 생각합니다 ... 질문은 잠들지 만 요건은 여전히 증가합니다. 정확하게 오늘 저는 이것을하고 싶었습니다. 간단한 팝업에 큰 js 파일을 사용하고 싶었습니다. 검색 중에 colorbox 플러그인을 발견하고 다소 파고 들었습니다. 사용 방법을 설명하는 this article을 발견했습니다. 나는이 질문을보고있는 8000+ times..So의 모든 사람들이 여전히 눈치 때문에 여기

함수이며,이 future..I에있는 사람에게 도움이 될 것입니다

<link href="popup/colorbox.css" rel="stylesheet"></link> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $.fn.colorbox({href:"popup/popup_image.jpg", open:true}); 
}); 
</script>

희망은 여기에 게시하고 싶었 견고한 솔루션을 찾고 있습니다.

출처

2014-10-15 07:05:05

고맙습니다.하지만 모바일 반응이 없습니다. 모바일 대응 형 대안을 제안 할 수 있습니까? –

이미지를 팝업으로 표시 페이지로드시

답변

관련 문제