하고 싶은 일

페이지를 여는 순간 다음 모드를 표시하는 기능을 만듭니다.

방법

헤드로 읽은 파일

jQuery, MagnificPopup의 JS 파일 및 CSS 파일
index.html

    <link rel="stylesheet" href="/css/magnific-popup.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="/js/jquery.magnific-popup.js"></script>

표시할 모드 섹션

id="popup"이 포인트입니다.
index.html

    <div id="popup" class="white-popup">
        Dynamically created popup
    </div>

모드 섹션 CSS

index.html

    .white-popup {
        position: relative;
        background: #FFF;
        padding: 20px;
        width: auto;
        max-width: 500px;
        margin: 20px auto;
    }

JavaScript 섹션

바디 밑에 그려주세요.src: "#popup"부분에서 id="popup"요소를 찾고 표시합니다.
index.html

    <script type="text/javascript">
    $(window).load(function(){
        $.magnificPopup.open({
            items: {src: '#popup'},
            type: 'inline', 
            modal: true,
        }, 0);
    });
    </script>

총체적

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <style type="text/css">
        .white-popup {
          position: relative;
          background: #FFF;
          padding: 20px;
          width: auto;
          max-width: 500px;
          margin: 20px auto;
        }
    </style>
    <link rel="stylesheet" href="/css/magnific-popup.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="/js/jquery.magnific-popup.js"></script>    
</head>
<body>
    <div id="popup" class="white-popup">
        Dynamically created popup
    </div>

    <script type="text/javascript">
    $(window).load(function(){
        $.magnificPopup.open({
            items: {src: '#popup'},
            type: 'inline', 
            modal: true,
        }, 0);
    });
    </script>    
</body>
</html>

이상

Reference

이 문제에 관하여(를 클릭하지 않고 MagnificPopup에 모드를 표시하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/katsukii/items/052918c45ab27eab8b06

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다