오늘은 등록창을 팝업 느낌으로 바꿔서 index.html과 합쳐줬다.
한참을 찾아보다. 약간 야매(?)같은 방법으로 팝업창을 구현했다.
구현 방법은 간단한데, 함수를 이용해 버튼클릭 이벤트 호출시 style에 visibility속성을 건드려 보였다 안 보였다 할수 있게 만들었다.
아마 display: none으로도 가능할 듯하다.
일단 간단한 페이지에 버튼을 달고 실험을 했다.
간단하게 팝업창을 하나 만들어주고 열릴 팝업창에 스타일에
visibility: hidden;
위 코드를 필수적으로 붙여준다.
function openPopup(){
document.getElementById('popup').style.visibility='visible'
}
function closePopup(){
document.getElementById('popup').style.visibility='hidden'
}
위와 같이 여는 버튼과 닫는 버튼에 각각 openPopup과 closePopup함수가 호출되도록 만들어둔다.
그럼 다음과 같은 결과가 완성된다.
아래는 완성 코드 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#popup{
width: 500px;
height: 500px;
background-color: yellow;
border: solid 5px red;
text-align: center;
position: absolute;
visibility: hidden;
}
#popup>button{
background-color: white;
width: 100px;
height: 50px;
}
</style>
<script>
function openPopup(){
document.getElementById('popup').style.visibility='visible'
}
function closePopup(){
document.getElementById('popup').style.visibility='hidden'
}
</script>
</head>
<body>
<div class="wrap">
<button style="width:120px; height: 50px; font-size: 20px;" onclick="openPopup()">팝업을 연다.</button>
<div id="popup">
<button>등록</button>
<button onclick="closePopup()">닫기</button>
</div>
</div>
</body>
</html>
등록 창을 팝업느낌으로 만들어서 index메인화면과 합쳤다.
<!doctype html>
<html lang="ko-kr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuary -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>비전5 영화 (마우스 오버)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
font-family: 'Nanum Myeongjo', serif;
}
.mytitle {
position: fixed;
color: black;
background-color: #fff;
width: 100%;
height: 150px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
z-index: 3;
}
.main {
padding: 200px 0 100px 0;
height: 2500px;
}
.mytitle>h1 {
font-size: 50px;
position: relative;
left: 50px;
}
.mytitle>button {
width: 200px;
height: 50px;
border-radius: 50px;
margin: 30px 20px 20px auto;
}
.mycards {
width: 80%;
margin: 0 auto;
}
.card-body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.card-title {
margin: 10px auto 10px 10px;
text-size-adjust: auto;
}
.screen {
position: relative;
overflow: hidden;
}
.card-img-top {
filter: brightness(1);
}
.card-img-top:hover {
filter: brightness(0.3);
}
.top {
pointer-events: none;
position: absolute;
bottom: 100%;
left: 10px;
z-index: 2;
color: white;
text-size-adjust: auto;
font-weight: 500;
}
.screen:hover .top {
top: 5%;
}
.btn>a {
text-decoration: none;
/* 링크의 밑줄 제거 */
color: inherit;
/* 링크의 색상 제거 */
}
/* 여기부터 */
/* 등록팝업 */
.popup_content{
visibility: hidden;
background-color: white;
border-radius: 8px;
border: solid;
width: 450px;
height: 550px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
margin-bottom: 40px;
text-align: center;
z-index: 100;
transition:all .35s;
}
/* 등록팝업 안 텍스트박스들 */
.textbox{
width: 90%;
padding-left: 10px;
font-size: 20px;
border: 2px solid #bbb;
border-radius: 8px;
margin-top: 20px;
resize: none;
}
/* 등록 취소 버튼 */
.btn-option{
width: 150px;
height: 50px;
border: 2px solid #ddd;
background-color: white;
border-radius: 8px;
cursor: pointer;
}
.btn-option:hover{
background-color: #bbb;
}
</style>
<script>
//DB에서 영화 정보를 가져 온 후 출력
$(document).ready(function () {
show_order1();
});
function show_order1() {
fetch("/movies").then(res => res.json()).then(data => {
let rows = data['result']
$('#cards').empty()
rows.forEach((a) => {
let title = a['title']
let desc = a['desc']
let image = a['image']
let comment = a['comment']
let star = a['star']
let director = a['director']
let character1 = a['character1']
let character2 = a['character2']
let character3 = a['character3']
let stars = ('⭐').repeat(star)
let temp_html = `<div class="col">
<div class="card">
<a href="{{url_for('sub')}}">
<div class="screen">
<div class="top">${desc}</div>
<img src="${image}"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p>${stars}</p>
</div>
</div>
</div>`
$('#cards').append(temp_html)
})
})
}
// 여기부터 영화등록
function popupOpen(){
// document.getElementById('popup').style.display= 'inline';
document.getElementById('popup').style.visibility='visible';
}
// 등록함수
function onResgistBtn(){
let url = $('#url').val();
let comment = $('#comment').val();
let star = $('#star').val();
let formData = new FormData();
formData.append("url_give", url);
formData.append("comment_give", comment);
formData.append("star_give", star);
fetch('/input',{method: "POST", body: formData}).then((res) => res.json()).then((data) => {
alert(data['msg'])
window.location.reload();
// window.location.reload(); 다시 메인화면으로 돌아가기
})
}
function onCancelBtn(){
// document.getElementById('popup').style.display = 'none';
document.getElementById('popup').style.visibility = 'hidden';
//메인페이지로 돌아가기
}
</script>
</head>
<body>
<div class="mytitle">
<h1>비전5 영화</h1>
<!-- 영화 기록 버튼 -->
<button onclick="popupOpen()" type="button" class="btn btn-outline-dark">영화 기록</button>
</div>
<div class="main">
<div id="popup" class="popup_content">
<h1>영화 등록하기</h1>
<!-- url입력 텍스트박스 -->
<input id="url" class="textbox" placeholder="url입력" type="text" style="height: 40px;">
<!-- 코멘트 텍스트박스 -->
<textarea id="comment" class="textbox" placeholder="코멘트를 입력해주세요." rows="8" cols="30" name="coments"></textarea>
<!-- 별점부분 -->
<div class="input-group mb-3" style="width: 90%; margin-left: 5%;">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<!-- 버튼부분 -->
<div style="margin-top: 50px; background-color: transparent; display: block;">
<button onclick="onResgistBtn()" class="btn-option">등록</button>
<button onclick="onCancelBtn()" class="btn-option">취소</button>
</div>
</div>
<h2 style="width: 80%; margin: 50px auto 30px auto; font-weight: 900;">비전5가 추천하는 영화 best4</h2>
<!-- 기본 추천 카드 출력 -->
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
<h2 style="width: 80%; margin: 80px auto 30px auto; font-weight: 900;">유저가 추천하는 영화</h2>
<!-- 현재 위치에 스크립트 내용 출력 -->
<div class="mycards">
<div id="cards" class="row row-cols-1 row-cols-md-4 g-3">
<div class="col">
<div class="card">
<a href="">
<div class="screen">
<div class="top">영화 설명</div>
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
</div>
</a>
<div class="card-body">
<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p>⭐⭐⭐</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>