반응형
음
모달을 띄워서 티스토리에서
심리테스트를 만들어 보고자 했는데
웹에서는 되는데 모바일 환경에서는 다 깨지는 문제가있다.
엄 왜그러지?
+ 기존의 CSS에 먹혀서 그런 것으로!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<style>
/* 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 */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 50%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<!--추가 코드-->
<script type="text/javascript">
$(document).ready(function () {
// DOM 생성 완료 시 화면 숨김 (파라미터로 전달되는 id는 제외)
hideExclude("changeM");
// radio change 이벤트
$("input[name=radioName]").change(function () {
var radioValue = $(this).val();
if (radioValue == "M") {
hideExclude("changeM");
} else if (radioValue == "F") {
hideExclude("changeF");
}
});
// 서버에서 전달 받은 값으로 radio 버튼 변경
$("#changeUpdateRadio").click(function () {
var resultValue = $("#radioId").val();
$("input[name=radioName][value=" + resultValue + "]").attr("checked", true);
});
// 체크 되어 있는지 확인
var checkCnt = $("input[name=radioName]:checked").size();
if (checkCnt == 0) {
// default radio 체크 (첫 번째)
$("input[name=radioName]").eq(0).attr("checked", true);
}
});
// text area 숨김
function hideExclude(excludeId) {
$("#changeTextArea").children().each(function () {
$(this).hide();
});
// 파라미터로 넘겨 받은 id 요소는 show
$("#" + excludeId).show();
}
</script>
<!-- 추가 코드 끝-->
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">심리테스트 시작</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<!-- 추가 -->
<div id="radioArea">
<input type="radio" name="radioName" value="M" />남자
<input type="radio" name="radioName" value="F" />여자
</div>
<input type="hidden" id="radioId" value="F">
<br /><br />
<div id="changeTextArea">
<div id="changeM">
<span>당신은</span>
<p>남자라고 생각하시는군요?</p>
</div>
<div id="changeF">
<span>당신은</span>
<p>여자라고 생각하시는군요?</p>
</div>
</div>
<!-- 추가 코드 끝 -->
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
$(document).ready(function () {
// 라디오버튼 클릭시 이벤트 발생
$("input:radio[name=radio]").click(function () {
if ($("input[name=radio]:checked").val() == "남자") {
$("div").attr("disabled", false);
// radio 버튼의 value 값이 1이라면 활성화
} else if ($("input[name=radio]:checked").val() == "여자") {
$("input:text[name=text]").attr("disabled", true);
// radio 버튼의 value 값이 0이라면 비활성화
}
});
});
</script>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [css] vh, vw 단위에 대해서 (0) | 2020.05.20 |
|---|---|
| 미디어 쿼리 참조 블로그 (0) | 2019.08.01 |
| 버튼에 링크주기 (0) | 2019.07.25 |
| [html/css/js] 온라인 코드작성기! -codepen (0) | 2019.03.21 |
| [튜토리얼]w3schools - CSS (0) | 2019.03.19 |