<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 dicta tempora quaerat, eius odio? Omnis dolor repudiandae ipsa maiores, eius eum enim atque totam ipsam amet earum.
Consequatur quos velit sit, a non voluptates, natus perferendis totam fugit quaerat blanditiis atque ab ad deleniti rerum labore? A fuga labore commodi voluptatibus officia, corporis consequatur illum accusamus neque!
Quam ex consequuntur maiores aliquid, consectetur ducimus tenetur! Vitae, quidem eveniet quod id repellat, sed necessitatibus perferendis dolor, dolore exercitationem iure accusantium deleniti suscipit temporibus aliquid architecto veniam repudiandae? Esse.
Tempora corrupti eligendi non dolore aliquid dignissimos iusto fugiat exercitationem odio a et, sit, quod impedit dolorem consequatur maiores. Doloribus vitae aspernatur perferendis? Fuga, temporibus possimus. Ipsum asperiores dolores dolore!
Fugiat autem alias at animi voluptatem ipsa blanditiis ipsam. Necessitatibus commodi blanditiis odio fugiat natus quod est pariatur inventore vel porro? Eligendi dolores numquam odit enim id, molestiae impedit aperiam?
Repudiandae, alias corrupti deleniti commodi temporibus aspernatur animi ex eligendi nulla rerum velit non ab et saepe accusantium assumenda? Consectetur ipsa quaerat adipisci nam? Aspernatur in quae ipsam porro id!
Voluptatibus temporibus, deleniti harum, laudantium maxime consequuntur alias voluptatem unde, laborum voluptas eum doloremque obcaecati doloribus eligendi sint molestiae dolore esse! Dolor voluptatum doloribus quis provident reiciendis corrupti fugit! Ex?
Animi dolor quam sunt quas mollitia possimus doloremque officia ipsa repellat! Ad, animi totam pariatur optio qui quas, praesentium dolorem iure vitae minus veniam sit ullam nesciunt iusto exercitationem. Sint?
Odio magni minus dolor, neque dolores eos! Totam impedit sunt nulla autem voluptas. Sit magnam ad consectetur molestias in recusandae mollitia officiis consequatur, ex aspernatur saepe laboriosam, odit, expedita minus?
Similique consectetur praesentium aliquid natus esse reprehenderit rem, animi, ipsam dolore, vero at. Magnam vel autem tenetur aspernatur, modi incidunt voluptate vitae labore esse quidem dignissimos pariatur fuga, unde hic.
Magni, nulla. Eum architecto sequi sed repudiandae error quos, corrupti culpa inventore? Odit, quaerat explicabo. Hic, distinctio facere! Fugit fugiat porro sit culpa reprehenderit nihil suscipit itaque molestias veniam quae?
Facilis eligendi repudiandae nihil quibusdam possimus, voluptatum non saepe optio impedit rerum, unde nobis repellendus ipsam consectetur mollitia reprehenderit ab illum id assumenda, exercitationem blanditiis eum. Atque expedita nobis quaerat!
Minima ex cumque tempore, itaque dolor placeat! Deleniti unde neque ea, omnis labore ut itaque rerum qui quisquam eveniet voluptatibus hic id vel porro sapiente sunt ipsum at voluptatum atque?
Repellendus dignissimos dolor a ratione animi unde, error cumque molestiae, libero ex, enim fugit! Iure nemo, perspiciatis unde alias molestiae aperiam provident omnis voluptas, itaque beatae distinctio maxime eum similique?
Illum nemo nihil quis et enim voluptatibus deserunt ipsum animi explicabo reiciendis voluptatum deleniti repudiandae optio unde sed ab autem dignissimos corrupti provident nam dolore expedita, vitae atque! Excepturi, qui?
Veniam, laboriosam. Quasi aliquid praesentium necessitatibus itaque, voluptates saepe facere sequi deserunt eum consectetur, sit tempore corporis quibusdam voluptatibus quia neque porro accusantium magni omnis cum error accusamus? Enim, eum.
Alias architecto expedita similique culpa, quasi cumque et laboriosam quibusdam laborum, quos tenetur? Quos blanditiis possimus expedita, voluptate est ut eos eum a maiores quidem corrupti laboriosam voluptas officia dolorem?
Assumenda molestiae voluptates ipsum distinctio vel reprehenderit neque beatae, ex sint incidunt odio mollitia consequuntur ullam doloribus quos modi? Ea enim asperiores voluptatem fugiat quidem eius aut perspiciatis quibusdam soluta.
</div>.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;
}
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);
// x 버튼 클릭시 닫히도록
$(".btn-popup-close").click(popup_off);
// 마우스 올라가면 팝업 뜨도록
$(".btn-popup-1").mouseenter(popup_on);
// 마우스가 벋어날때 닫히도록 mouseover/mouseout은 최대한 쓰지말것
$(".btn-popup-close").mouseleave(popup_off);
External CSS
This Pen doesn't use any external CSS resources.