버튼별로 modal 나타나는 창을 다르게 하고싶습니다..
본문
버튼별로 modal 창을 다르게 하고 싶은데 잘 안되네요..ㅜㅜ
3개로 나눠서 각 클릭마다 modal 창을 다르게 띄우고 싶은데.. 인터넷에서 찾아봤을 때 긁어와도 여러개가 안되고
버튼도 따로 css가 있어서 그런지 잘 안되는거 같습니다..
소스보고 혹시 어떤 부분이 잘못되었는지 조언 부탁드립니다
<style>
/* 팝업 외 어두운 효과 */
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9999;
/* 숨기기 */
z-index: -1;
opacity: 0;
}
.show1 {
opacity: 1;
z-index: 9999;
transition: all 0.5s;
}
.window {
position: relative;
width: 100%;
height: 100%;
}
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
/* 임시 지정 */
width: 100px;
height: 100px;
/* 초기에 약간 아래에 배치 */
transform: translate(-50%, -40%);
}
.show1 .popup {
transform: translate(-50%, -50%);
transition: all 0.5s;
}
</style>
<div class="right-container1">
<button id="show" class="right-container-button1"><span class="short-text1">
<img src="<?php echo G5_THEME_IMG_URL?>/side/c1.gif" alt="aaa">
</span> <span class="long-text1" style="">aaa</span>
</button>
</div>
<div class="right-container2">
<button id="show2" class="right-container-button2"><span class="short-text2">
<img src="<?php echo G5_THEME_IMG_URL?>/side/c2.gif" alt="bbb">
</span> <span class="long-text2" style="">bbb</span>
</button>
</div>
<div class="right-container3">
<button id="show3" class="right-container-button3"><span class="short-text3">
<img src="<?php echo G5_THEME_IMG_URL?>/side/c3.gif" alt="ccc"></a>
</span> <span class="long-text3" style="">ccc</span>
</button>
</div>
<script>
function show() {
document.querySelector(".background").className = "background show1";
}
function close() {
document.querySelector(".background").className = "background";
}
function show2() {
document.querySelector(".background").className = "background show";
}
function close() {
document.querySelector(".background").className = "background";
}
document.querySelector("#show").addEventListener("click", show);
document.querySelector("#close").addEventListener("click", close);
function show3() {
document.querySelector(".background").className = "background show";
}
function close() {
document.querySelector(".background").className = "background";
}
document.querySelector("#show").addEventListener("click", show);
document.querySelector("#close").addEventListener("click", close);
</script>
답변 1
제이쿼리 ui에 있기도 하고 아니면 디자인 이쁜거 하실거면 부트스트랩에 보면 모달창 있어요
부트스트랩 안쓰고 하실거면 jquery ui에서 제공되는 거쓰시면되요
여기서 다이얼로그 옵션에 클래스 추가하면 css 수정 가능하구요
답변을 작성하시기 전에 로그인 해주세요.
