IT/HTML&CSS

티스토리 게시글 js 및 css 관련

밍띠이 2019. 8. 31. 21:59
반응형

모달을 띄워서 티스토리에서 

심리테스트를 만들어 보고자 했는데

 

웹에서는 되는데 모바일 환경에서는 다 깨지는 문제가있다.

웹 버전
예상 모바일 버전
실제로 모바일에서 보이는 화면

 

엄 왜그러지?

+ 기존의 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">&times;</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