[SIST] Web_javascript_days08

예제1) 원하는 위치에 마우스 클릭시 이미지 생성하기

- 이미지를 원하는 위치에 생성하기 위해선 style 태그 안에 position 속성을 absolute를 주어야 함

 

- body 태그 안에 이미지 태그 하나 생성

 

[script 코드]

 

[결과]

title 부분에 좌표와 이미지 너비가 보임

 

원하는 위치를 클릭하면 새로운 이미지 생성

이미지 우클릭시 해당 이미지 삭제

휠 클릭시 전체 이미지 삭제

---

예제2) 모달(modal) 창

[style 태그]

<style>
  .modal-header, .modal-footer{
    background-color: #5CB85C;
    padding: 2px 16px;
    color:white;
  }
  
  .modal-body{
    padding: 2px 16px;
  }
  
 .close{
    color:white;
    float:right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover, .close:focus{
    color:#000;
    text-decoration: none;
    cursor: pointer;
  }
  
   .modal{
    display:none;    
  
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left:0;
    top:0;
       width:100%;   
       height:100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color:rgba(0,0,0,0.4);
  }
  
  .modal-content{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding:0;
    border:1px solid #888;
    width: 80%;
    box-shadow: 0 4px 9px 0  rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    
    animation-name:animatetop;
    animation-duration: 0.4s;
    
    -webkit-animation-name:animatetop;
    -webkit-animation-duration: 0.4s;
  }
  
   /* 애니메이션 효과 */
  @keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }
  @-webkit-keyframes animatetop{
     from{ top:-300px; opacity: 0; }
     to{ top:0; opacity: 1; }
  }
</style>

 

[body 태그 안 뼈대]

 

[script 코드]

 

[결과]

Open Modal 버튼을 누르면 창이 나옴

창의 X를 클릭하면 닫힌다.