4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 4월 23일 17:02 #78657
이슬아참가자<!DOCTYPE html> <html lang="ko"> <head> <title>모달창 만들기</title> <!-- Required meta tags --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <style> .black-bg { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); z-index: 5; padding: 30px; visibility: hidden; opacity: 0; transition: all 1s; } .white-bg { background: white; border-radius: 5px; padding: 30px; }.show-modal { visibility: visible; opacity: 1; }.list-group { display: none; }.show { display: block; } .main-bg { padding: 100px 20px; background: lightgrey; } </style> <body> <div class="black-bg"> <div class="white-bg"> <h4>로그인하세요</h4> <!-- action="url" 서버로 유저정보를 전송하려고 씀--> <form action="success.html"> <div class="my-3"> <!-- 전송버튼 누를때 <input>에 입력된게 없으면 alert띄우기 --> <input type="text" class="form-control" id="email" /> </div> <div class="my-3"> <input type="password" class="form-control" /> </div> <!-- 전송버튼은 항상 type=submit으로 / 일반 버튼은 type=button타입을 버튼으로 만들어 줘야함 --> <button type="submit" id="send" class="btn btn-primary">전송</button> <button type="button" class="btn btn-danger" id="close">닫기</button> </form> </div> </div><nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">Navbar</span> <button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav>
<ul class="list-group" id="test1"> <li class="list-group-item">An item <li class="list-group-item">A second item <li class="list-group-item">A third item <li class="list-group-item">A fourth item <li class="list-group-item">And a fifth one
<div class="main-bg"> <h4>Shirts on Sale</h4> <button id="login" class="btn btn-danger">로그인</button> </div>
<script> //전송버튼 누르면(이벤트리스너) input에 입력한 값이 공백이면 알림창 띄워주세요~!! //조건문이라고 함 // if (조건){조건이 참일때 실행할코드~~~} else{참이 아니면 실행할 코드} //if (3 > 1){console.log('안녕')} = 참이므로 실행해줌$("form").on("submit", function () { if (document.getElementById("email").value == "") { alert("아이디 입력안함"); } });document .getElementsByClassName("navbar-toggler")[0] .addEventListener("click", function () { document .getElementsByClassName("list-group")[0] .classList.toggle("show"); });//로그인 버튼 클릭하면 show-modal 클래스를 저기(black-bg) 붙여주셈 document.getElementById("login").addEventListener("click", function () { document.querySelector(".black-bg").classList.toggle("show-modal"); }); //닫는 버튼 document.getElementById("close").addEventListener("click", function () { document.querySelector(".black-bg").classList.remove("show-modal"); }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous" ></script> </body> </html>선생님 안녕하세요!! 공백창을 만드니 버튼이 실행이 안됩니다 어디가 문제일까요 ㅠㅠㅠㅠ
-
글쓴이글
이부분이 에러라고 뜨는데 어디가 잘못된건지 모르겠습니다..ㅠㅠㅠ
코드를 주석처리하면 메뉴버튼도 잘되고 로그인버튼을 눌러도 모달창이 뜹니다4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.