독립적인 창으로(_blank) 나오게 하려면 어디를 수정해야 하나요?
본문
아래의 소스에서
<span class="popuptext" id="myPopup">A Simple Popup!</span>
이 부분이 독립적인 창으로(_blank) 나오게 하려면 어디를 수정해야 하나요?
감사합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
답변 3
수정이 아니라 새로 작성하세요
해당 소스는 해당 페이지에서 모달창을 띄우는 코드라 실제로는 html 태그를 감추거나 보여주는것이고
말씀하시는거는 window.popup 등으로 아에 새로운 브라우저 탭을 여셔야 합니다.
수정할 필요가 없고,
아예 새로 작성하셔야 합니다
관련 소스는 window popup 창 열기 등으로 검색해보세요
볼피드 님
답변 감사합니다.
모달창도 z-index, position, display 이정도만 활용하셔도 충분히 만드실 수 있습니다.
물론 열고 닫기는 jquery나 javascript를 활용하셔야 되겠지만, 그걸로 css 건드는 정도라 찾으면 금방 하실거 같습니다.