[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기 



팝업을 사용할때 배경을 흐리게 만들어 팝업에 집중할 수 있게 효과를 주는 방법이다.

인터넷에서 조금만 검색을 해봐도 쉽게 찾을 수 있겠지만, 막상 또 만들어 쓰려고 하면 시간을 많이 잡아먹기 마련이다.



예전에 아주 유용하게 사용한 소스라서 저장해 두고 있다가 같이 공유해본다.













1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>배경이 가려진 레이어 팝업 뛰우기</title>
<style> 
/* 마스크 뛰우기 */
#mask {  
    position:absolute;  
    z-index:9000;  
    background-color:#000;  
    display:none;  
    left:0;
    top:0;
} 
/* 팝업으로 뜨는 윈도우 css  */ 
.window{
    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 type="text/javascript"> 
//<![CDATA[
    function wrapWindowByMask(){
 
        //화면의 높이와 너비를 구한다.
        var maskHeight = $(document).height();  
        var maskWidth = $(window).width();  
 
        //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
        $("#mask").css({"width":maskWidth,"height":maskHeight});  
 
        //애니메이션 효과 - 일단 0초동안 까맣게 됐다가 60% 불투명도로 간다.
 
        $("#mask").fadeIn(0);      
        $("#mask").fadeTo("slow",0.6);    
 
        //윈도우 같은 거 띄운다.
        $(".window").show();
 
    }
 
    $(document).ready(function(){
        //검은 막 띄우기
        $(".openMask").click(function(e){
            e.preventDefault();
            wrapWindowByMask();
        });
 
        //닫기 버튼을 눌렀을 때
        $(".window .close").click(function (e) {  
            //링크 기본동작은 작동하지 않도록 한다.
            e.preventDefault();  
            $("#mask, .window").hide();  
        });       
 
        //검은 막을 눌렀을 때
        $("#mask").click(function () {  
            $(this).hide();  
            $(".window").hide();  
 
        });      
 
    });
 
//]]>
</script>
</head>
<body>
    <div id ="wrap"> 
        <div id = "container">  
            <div id="mask"></div>
            <div class="window">
                <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>
</body>
</html>
cs


저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 이미지 슬라이더 / 탭 슬라이더 / setInterval / 슬라이더 만들기  (2) 2016.07.01
jQuery 4일째 (ajax)  (0) 2014.07.31

[ ORACLE ] ORACLE INSTALL / 오라클 설치 / 오라클 설치하는 방법 / 오라클 설치법




회사에서는 오라클을 사용하는데 피씨를 포맷할 일이 생기거나 아니면 다른 피씨를 셋팅할 일이 있을때마다

오라클을 다시 설치해야 되는데 설치할때마다 여간 귀찮은 일이 아니다.


이 글을 잘 작성한 다음에~ 

이것 보고 설치하시오!! 하면 될 것같다. 



일단!!


아래 2단계로 진행해서 설치할 것이다.


Step 1. 오라클 프로그램 다운로드

Step 2. 설치






자 그럼 간단해서 딱히 단계랄 것도 없지만 1단계 부터 진행해보도록 하자.


Step 1 . 오라클 프로그램 다운로드


-> http://www.oracle.com/index.html 


위 링크를 새창을 뛰운 다음에 아래와 같이 진행을 한다.




-> Downloads > Oracle Database 






-> 각자 컴퓨터 환경에 맞는 버젼을 확인 후 > See All






-> 라이센스에 동의하고 다운로드 시작!






-> 오라클 계정이 필요하면 손쉽게 가입가능하다.





-> 아래와 같이 열심히 다운받는 중 ( 컴퓨터 환경에 따라 다르겠지만, 속도가 상당히 빠른편이다. )







Step 2 . 설치



-> 압축 해제 후 > client > setup.exe ( 관리자 권한으로 실행 )







-> 클라이언트를 설치할 것이기 때문에 instant Client 선택 후 > 다음!





-> 설치를 원하는 폴더를 선택한 후 > 다음!





-> 요약단계에서 다음 선택하면 아래와 같이 설치가 진행된다.





-> 설치 끝!




Tip 

-> 오라클 프로그램을 설치하다가 보면, Path 관련 에러가 뜨는 경우가 있다.  

    처음에는 영문을 몰라서 한참을 삽질 했었지만, 시스템 환경변수에서 Path 변수가 너무 길어서 Oracle 프로그램 설치에 필요한 변수가 등록될 공간이 없어서

    생긴 에러였다. 불필요하거나 중복된 내용을 Path 변수에서 삭제한 뒤 다시 시도해 보자!

저작자표시

'웹프로그래밍 > DATABASE' 카테고리의 다른 글

[MS-SQL] 커서 / 루프 / 커서 사용하기 / CURSOR  (0) 2019.11.05
[MS-SQL] 트랜젝션 / MS-SQL TRANSACTION  (0) 2019.11.04
[MS-SQL] 프로시저 동적쿼리  (0) 2019.11.04
[MS-SQL] 프로시저 생성 / CREAT PROCEDURE  (0) 2019.11.04

[ 컴퓨터 ] 인터넷익스플로러 재설치, 인터넷익스플로러 10 설치하는 법, 인터넷익스플로러, internet explorer delete 삭제

 

 

인터넷 익스플로러는 불편한 부분이 많지만, 아직 까지 우리나라에서는 이것 없이 웹서핑하기가 불편하다.

 

근데 익스플로러는 윈도우 업데이트와 동시에 업그레이드 되면서 안생기던 오류가 발생하기도 하고,

아니면 웹 서핑도중에 불필요한 프로그램들이 같이 깔려서 삭제 또는 재설치가 필요한 경우가 종종 발생한다.

 

이것때문에 포맷하기는 아까우니 익스플로러 재설치 방법을 알아두는 것이 좋을 것 같다.

 

 

일단 삭제하는 법 부터 살펴보자.

 

 

step 1. 제어판 > 프로그램 > 설치된 업데이트 보기 클릭!

 

 

 

 

 

 

 

 

step 2. 인터넷 익스플로러 제거

 

-> 아래와 같이 현재 설치되어 있는 익스플로러를 찾아서 우클릭 후 삭제!

 

 

 

 

 

 

 

step 3. 인터넷 익스플로러 다운

 

-> 필요한 익스플로러 버젼을 다운 받아야 한다.

 

    https://support.microsoft.com/ko-kr/help/17621/internet-explorer-downloads

 

 

 

 

-> 익스플로러 10 버전이 필요한 경우도 있을것 같아 아래에 파일로 첨부

 

 

    IE10-Windows6.1-x64-ko-kr (2).z01

    IE10-Windows6.1-x64-ko-kr (2).z02

    IE10-Windows6.1-x64-ko-kr (2).z03

    IE10-Windows6.1-x64-ko-kr (2).z04

    IE10-Windows6.1-x64-ko-kr (2).zip 

 

위에서 다운받은 파일을 설치해주시면 끝!!

 

저작자표시

'웹프로그래밍' 카테고리의 다른 글

[ 반응형 웹 하위브라우저에 대응하기 ] HTML5/CSS3/미디어쿼리 하위브라우저 대응  (0) 2018.07.22
[ 프로그램 설치 ]자바 JDK 다운로드 및 설치 방법 / 자바 환경변수 설정  (0) 2016.06.21
[ 웹프로그래밍 ] 무료호스팅 / notepad++ ftp 연결 / php 무료호스팅 / notepad++ 사용법 / dothome 무료호스팅 / 포트폴리오 호스팅  (0) 2016.02.17
[ 웹프로그래밍 ] 무료호스팅 추천 / php호스팅 / 호스팅  (0) 2015.12.29

[ jquery 슬라이더 ] 이미지 슬라이더 / 탭 슬라이더 / setInterval 




단순하게 인터벌 함수를 이용해서 만든 슬라이더 함수이다.


아직 추가할 기능이 몇 가지 남아있지만 기본적인 작동 원리를 이해하기에는

괜찮은 예제인 것 같다.


 - 탭 위에 마우스를 가져다가 되면 슬라이딩 정지

 - 배너위에 마우스를 올리면 슬라이딩 정지


위 두가지 기능은 다음 포스팅에서 다루기로 하고..


아래 예제는 display:none 을 사용하지 않고  visibility:hidden 과 position:absolute 속성을 이용해서

만들어 졌다.





예제 1)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<head>
<style>
ul,li{list-style:none;}
#TopSlider{width:500px; height:300px; border:1px solid #d2d2d2;}
#TopSlider div{width:498px;height:298px; float:left; visibility:hidden; position:absolute;}
#top_0{background-color:red;}
#top_1{background-color:blue;}
#top_2{background-color:gray;}
#top_3{background-color:yellow;}
#ul_btns{float:left; width:420px; border:1px solid #e0e0e0;}
#ul_btns a{float:left; width:100px; border:1px solid #e0e0e0;}
#ul_btns .on{background-color:red;}
 
</style>
<script    src="https://code.jquery.com/jquery-3.0.0.min.js" 
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   
        crossorigin="anonymous"></script>
<script>
 
    var intv;
    var current = 0;
    var sIdx = 0;
    var sCnt =  4;
    
 
    function startTopSlider() {
        intv = setInterval(function () {
            $("#ul_btns").find("a").eq(current++ % sCnt).click();
        }, 3000);
    }
 
    function setBnr(idx, bnr, allTab, addCls) {
        $(bnr).css("visibility", "hidden")
              .eq(idx).css("visibility", "visible");
        $(allTab).removeClass(addCls);
        $(allTab).eq(idx).addClass(addCls);
    }
 
    $(document).ready(function () {
        
        //set init
        $("#top_0").css("visibility", "visible");
        $("#btn_0").addClass("on");
        startTopSlider();
        
        
        $("#ul_btns").find("a").click(function(){
            var idx = $(this).attr("id").split("_")[1];
            setBnr(idx, "#TopSlider > div" , "#ul_btns > a" , "on" );
            
        });
 
        
    });
</script>
 
</head>
<body>
    <p>setInterval 을 이용한 슬라이더 예제</p>
    <div id="TopSlider">
        <div id="top_0">배너 0</div>
        <div id="top_1">배너 1</div>
        <div id="top_2">배너 2</div>
        <div id="top_3">배너 3</div>
    </div>
    <div id="TopSliderBtn">
        <ul id="ul_btns">
            <a href="#" id="btn_0"><li>tab0</li></a>
            <a href="#" id="btn_1"><li>tab1</li></a>
            <a href="#" id="btn_2"><li>tab2</li></a>
            <a href="#" id="btn_3"><li>tab3</li></a>
        </ul>
    </div>
</body>
</html>
 
 
cs




디자인이 아주 부끄럽지만.. 디자인을 보려고 만든 예제는 아니니까 이해하고 넘어가도록 하자.


tab0 -> tab1 -> tab2 -> tab3 으로 이동하면서 배너 0 ~~> 배너 3 까지 노출 되는 방식이다.




예제 1 - 결과화면 )






간단하게 예제를 만드려고 노력했는데, 만들고 나니 다소 복잡한 것 같기도 하다.



예제파일 : 

test.html


display:none 과 visibility:hidden 의 차이는 아래 포스팅을 참고하도록 하자!



http://gyunbox.tistory.com/entry/visibility



"끝"






저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
jQuery 4일째 (ajax)  (0) 2014.07.31

+ Recent posts

티스토리툴바