버튼클릭 및 바로실행 하단팝업창 소스 > 솔루션(그누/영카트) 팁자료실

본문 바로가기
사이트 내 전체검색

회원로그인

회원가입

오늘 본 상품 0

없음


솔루션(그누/영카트) 팁자료실

기타 버튼클릭 및 바로실행 하단팝업창 소스

페이지 정보

profile_image
작성자 관리자
댓글 0건 조회 1,909회 작성일 22-05-10 09:04

본문

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {font-family: Arial, Helvetica, sans-serif;}


/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

  -webkit-animation-name: fadeIn; /* Fade in the background */

  -webkit-animation-duration: 0.4s;

  animation-name: fadeIn;

  animation-duration: 0.4s

}


/* Modal Content */

.modal-content {

  position: fixed;

  bottom: 0;

  background-color: #fefefe;

  width: 100%;

  -webkit-animation-name: slideIn;

  -webkit-animation-duration: 0.4s;

  animation-name: slideIn;

  animation-duration: 0.4s

}


/* The Close Button */

.close {

  color: white;

  float: right;

  font-size: 28px;

  font-weight: bold;

}


.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}


.modal-header {

  padding: 2px 16px;

  background-color: #5cb85c;

  color: white;

}


.modal-body {padding: 2px 16px;}


.modal-footer {

  padding: 2px 16px;

  background-color: #5cb85c;

  color: white;

}


/* Add Animation */

@-webkit-keyframes slideIn {

  from {bottom: -300px; opacity: 0} 

  to {bottom: 0; opacity: 1}

}


@keyframes slideIn {

  from {bottom: -300px; opacity: 0}

  to {bottom: 0; opacity: 1}

}


@-webkit-keyframes fadeIn {

  from {opacity: 0} 

  to {opacity: 1}

}


@keyframes fadeIn {

  from {opacity: 0} 

  to {opacity: 1}

}

</style>

</head>

<body>


<h2>Bottom Modal</h2>


<!-- Trigger/Open The Modal -->

<button id="myBtn">Open Modal</button>


<!-- The Modal -->

<div id="myModal" class="modal">


  <!-- Modal content -->

  <div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

      <p>Some text in the Modal Body</p>

      <p>Some other text...</p>

    </div>

    <div class="modal-footer">

      <h3>Modal Footer</h3>

    </div>

  </div>


</div>


<script>

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];


// 클릭시

btn.onclick = function() {

  modal.style.display = "block";

}


// 바로실행

function ready() {

    modal.style.display = "block";

}

  document.addEventListener("DOMContentLoaded", ready);


// 닫을경우

span.onclick = function() {

  modal.style.display = "none";

}


window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = "none";

  }

}

</script>


</body>

</html>

댓글목록

등록된 댓글이 없습니다.


네이버블로그 인스타그램 네이버까페 유튜브 네이버밴드 페이스북 트위터 카카오스토리

사이트 정보

회사명 : 회사명 / 대표 : 대표자명
주소 : OO도 OO시 OO구 OO동 123-45
사업자 등록번호 : 123-45-67890
전화 : 02-123-4567 팩스 : 02-123-4568
통신판매업신고번호 : 제 OO구 - 123호
개인정보관리책임자 : 정보책임자명

접속자집계

오늘
19
어제
107
최대
331
전체
30,416
Copyright © 소유하신 도메인. All rights reserved.