JS_10_jQuery_button_popup

button_popup

codepen_test

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<div class="popup-1">
  <div class="popup-head">
    <button class="btn-popup-close">x</button>
  </div>
</div>
<div class="con">
  <button class="btn-popup-1">popup1</button>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium soluta nihil voluptate vel omnis, quis a non ea est quam eos eveniet deserunt voluptatem beatae quo asperiores, saepe cum tempore.
  Deleniti nisi natus eveniet ex earum iure ipsum odit, nostrum quidem adipisci corrupti! Provident quasi dolorum reprehenderit, rem, nam ducimus iure non hic deleniti fuga ipsam exercitationem incidunt facere aut.
  Amet repellendus quidem aliquid natus consequatur soluta neque modi ipsa aspernatur vel in, recusandae mollitia nisi animi accusamus quam repellat inventore omnis suscipit, perferendis minus ut cum expedita? Quos, odio?
  Ipsum laborum dolore rem suscipit porro neque maxime quam consequuntur, consequatur aliquam, mollitia quaerat perferendis fugit tenetur eligendi deleniti ut sequi fugiat magnam autem quibusdam exercitationem. Minima eaque dolorum quas.
  Quas, fugiat! Repellendus culpa autem voluptas sit necessitatibus accusantium omnis! Earum blanditiis vitae non ipsum tenetur tempore, numquam, provident, quod dolore velit dolores! Iste, id dicta inventore enim deleniti in!
  Deleniti animi rerum beatae quaerat facilis adipisci, commodi distinctio cum dignissimos cupiditate, culpa repellat nisi molestias corporis saepe eveniet omnis quod labore officia eos. Eveniet quo laudantium praesentium nesciunt pariatur?
  Impedit modi aliquid quam odio labore deleniti error dignissimos culpa architecto corporis reprehenderit ad blanditiis optio natus, aspernatur quidem dolorem est adipisci aliquam. Amet obcaecati est, minus ipsam asperiores vero!
  Sint, ea saepe! At animi tenetur, earum doloribus molestiae aut eos odio aperiam totam est repellat veniam, illo quisquam adipisci nemo! Corporis esse ducimus nulla explicabo! Unde repellendus quam velit.
  Dicta soluta adipisci odio in aspernatur consequuntur libero fugit vel cupiditate sunt facilis impedit corporis quos, tempore consectetur dolores enim, deleniti tempora esse omnis amet ipsam minima numquam! Corrupti, mollitia.
  Optio eum dignissimos molestias ab voluptates. Tenetur libero similique quod maiores mollitia quasi facere nam. Odio voluptate fugiat harum, voluptatem architecto provident, optio, fugit temporibus omnis repellat repudiandae dolores. Beatae?
  Nostrum odio tempora veniam sed et, maiores impedit iste dolor explicabo fugit cum exercitationem quasi voluptas. Ratione distinctio harum ullam, vel voluptate doloremque esse, aliquid adipisci beatae doloribus dolores architecto.
  Laborum optio aliquid itaque architecto, aut perferendis illo provident ratione natus labore accusamus minus, deserunt aperiam similique sequi eveniet dolor culpa repellendus voluptate inventore blanditiis. Temporibus nobis ratione impedit eos.
  Error ea beatae consequuntur vero amet dolorum et nesciunt molestiae, similique nihil accusantium ex voluptatem quae eaque delectus officiis? Maiores magni doloribus at impedit animi laudantium, quidem excepturi mollitia rem.
  Vel magnam natus eaque officiis dolorum quia, aperiam libero placeat fugiat, doloremque minima quo saepe hic quae? Esse vitae voluptatem, provident ipsa incidunt voluptates. Ut consequuntur fugit tempora animi quia?
  Adipisci, molestiae esse eius omnis in, velit eveniet voluptatem hic voluptas expedita laboriosam autem corrupti quos odit reprehenderit recusandae id dicta laborum sed, minima ipsum quisquam. Assumenda ratione non magni!
  Sit, ut. Aliquid corporis commodi laudantium saepe deserunt maiores nobis facere id natus eaque! Odit consequuntur minima quia, rem nam esse illum laboriosam, error in expedita doloremque architecto molestias laborum.
  Dolorem illo illum adipisci quis obcaecati eligendi quod ipsum, veritatis consequuntur est saepe, quia aspernatur, modi perferendis optio perspiciatis! In mollitia nostrum, magnam tenetur cum maxime quidem harum amet voluptas!
  Illo rerum, nam non hic sequi dolorum quisquam veritatis ab iste facilis perferendis doloremque natus beatae earum cumque ea doloribus sint similique accusamus totam. Autem obcaecati tempore consectetur repellat voluptas?
  Quam quis amet quod aliquam voluptate in, iusto tempora voluptas exercitationem, distinctio placeat ratione dolor maiores! Nisi dignissimos, iste cum labore porro delectus animi impedit sed eaque atque et culpa.
  Ut veritatis blanditiis minima deleniti molestias numquam facilis minus eum vero, voluptatem possimus, quae quaerat dolor alias, nesciunt suscipit quibusdam a at ullam nulla sequi porro? Odit eos sit reprehenderit.
  Dolore culpa, nulla eveniet, inventore illo beatae, aliquid voluptatem cupiditate repellat perferendis vero quidem obcaecati fuga sed. Quidem dolor, obcaecati, praesentium eaque temporibus ad odio nemo nisi, eos nam exercitationem?
  Consequatur vero eligendi dolore sed? Facilis distinctio ab ullam. Numquam modi sint fugit sit dolorum. Obcaecati aut ratione culpa aliquam, sequi magnam dolores corporis, exercitationem architecto veniam labore voluptatum quibusdam!
  Maxime fugiat minus sapiente nesciunt! Nulla perspiciatis cupiditate id exercitationem itaque atque  </div>

CSS

.con {
  margin: 0 auto;
  max-width: 700px;
}
.popup-1 {
  width: 300px;
  height: 300px;
  background-color: white;
  position: fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border: 10px solid black;
  box-shadow: 0px 0px 100px rgba(0,0,0,0.7);
}
.btn-popup-close{
  display:block;
  margin-left:auto;
}

JS

console.clear();
let flag = false;
function popup_on() {
    $('.popup-1').css('display','block');   
}
function popup_off() {
    $('.popup-1').css('display','none');   
}
// 버튼 클릭시 팝업 뜨도록
$('.btn-popup-1').click(popup_on);
// 마우스 올라가면 팝업 뜨도록
$('.btn-popup-1').mouseenter(popup_on);
// x 버튼 클릭시 닫히도록
$('.btn-popup-close').click(popup_off);

---

여담

주로 아래와 같이 짝을 이루어 사용한다.

• mouseOver <-> mouseOut : 사용 권장 안함

• mouseEnter <-> mouseLeave

• 참고사이트

  • https://velog.io/@commi1106/MouseOver%EC%99%80-MouseEnter%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81