오늘하루 열지않기 팝업

HTML 오늘하루 보지않음 닫기 CSS #popup{position:relative; display: none;} #popup::after{content:''; display:block; width:100%; height: 100%; position:fixed; left:0; top:0; background:rgba(0,0,0,0.7); z-index:998;} #popup .popup_wrap{position:fixed; left:50%; top:50%; z-index:999; transform:translate(-50%, -50%);} #popup .popup_btn{display:flex; align-items:center; justify-content: space-between; gap:1rem;..

2022.06.02

jQuery 객체 배열 팝업

CSS *{margin: 0; padding: 0;} .pop .modal_box{position: fixed; left: 0; top: 0; z-index: 50; width: 100%; height: 100%; background: #000; opacity: .7; display: none;} .pop .popup{position: fixed; top: 50%; left: 50%; margin: -300px 0 0 -300px; width: 600px; height: 600px; background: #fff; box-shadow: 1px 3px 7px 0px #666; z-index: 60; display:none;} .pop .popup img{width: 94%; margin:20px 3%;} ..

2021.12.14

jQuery click pop

CSS .pop{} .pop .modal_box{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .7; display: none; z-index: 50;} .pop .popup{position: fixed; top: 50%; left: 50%; margin: -300px 0 0 -300px; width: 600px; height: 600px; background: #fff; box-shadow: 1px 3px 7px 0px #666; z-index: 100; display:none;} .pop .popup img{width: 94%; margin:20px 3%;} .pop .popup p{widt..

2021.12.14

jQuery layer popup

JS $(document).ready(function(){ $('.openBtn').on('click', function(e){ e.preventDefault(); $(this).next('.big').fadeIn('slow'); $('.box').show(); }); $('.closeBtn, .box').on('click', function(e){ e.preventDefault(); $('.big').fadeOut('fast'); $('.box').hide(); }); }); HTML 이미지에 대한 내용 닫기 이미지에 대한 내용 닫기

2021.12.14