웹프로그래밍

Global It Leader!!


jQuery


 
 

초간단 배경 투명 레이어 팝업 띄우기

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 3,240회 작성일 20-11-03 19:41

본문

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<title>배경이 가려진 레이어 팝업 뛰우기</title>
<style>

/* 마스크 뛰우기(fixed로 하면 화면을 내려도 흰부분 안보임) */
#mask { 
    position:fixed;
 width:100%;
 height:100%;
    z-index:9000; 
    background-color:#000; 
    display:none; 
    left:0;
    top:0;
}

/* 팝업으로 뜨는 윈도우 css  */
.popup{
    display: none;
    position:absolute; 
    left:50%;
    top:50px;
    margin-left: -500px;
    width:1000px;
    height:500px;
    background-color:#FFF;
    z-index:10000;  
 }
 
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){
        //검은 막 띄우기
        $(".openMask").click(function(e){
            e.preventDefault();
         $("#mask").fadeTo("slow",0.6);   
            $(".popup").show();
        });
 
        //닫기 버튼을 눌렀을 때
        $(".popup .close").click(function (e) { 
            //링크 기본동작은 작동하지 않도록 한다.
            e.preventDefault(); 
            $("#mask, .popup").hide(); 
        });      
 
        //검은 막을 눌렀을 때(이것도 필요 없으면 삭제해도 됨)
        $("#mask").click(function () { 
            $(this).hide(); 
            $(".popup").hide(); 
 
        });     
 
    });
 </script>
</head>
<body>
    <div id ="wrap">
        <div id = "container"> 
            <div id="mask"></div>
            <div class="popup">
                <p style="width:1000px;height:500px;text-align:center;vertical-align:middle;">팝업 내용 입력</p>
                <p style="text-align:center; background:#ffffff; padding:20px;"><a href="#" class="close">닫기X</a></p>
            </div>
            <table border="0" cellpadding="0" cellspacing="0" width="100%">      
                <tr>
                    <td align="center">
                    <a href="#" class="openMask">레이어 팝업 발생</a>
                    </td>
                </tr>      
            </table>
        </div>
    </div>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>


댓글목록

등록된 댓글이 없습니다.

전체 142
게시물 검색
jQuery 목록
번호 제목 글쓴이 조회 날짜
122 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1865 08-04
121 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2150 06-25
120 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1896 05-28
119 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3073 03-06
118 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2881 03-02
117 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2658 11-06
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3241 11-03
115 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2640 10-28
114 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2754 10-06
113 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2608 09-11
112 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2811 01-20
111 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2728 08-18
110 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2742 01-30
109 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3036 09-23
108 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2936 02-04
107 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3002 02-04
106 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3183 09-05
105 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3256 02-23
104 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3232 12-27
103 no_profile 오원장 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 3312 12-21