<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="popup-1">
  <div class="popup-1__head">
    <button style="display:block; margin-left:auto;" class="popup-1__btn-close">X</button>
  </div>
</div>

<div class="con">
  <button class="btn-popup-1">팝업 1</button>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum porro esse cupiditate laboriosam nostrum voluptatibus nulla? Aperiam alias libero deleniti commodi nobis unde reprehenderit, ex temporibus expedita sequi debitis molestiae!
  Rerum tempore perferendis odio obcaecati consequuntur ipsum sequi reiciendis repellat pariatur dolore, a temporibus nihil repellendus laudantium iure! Quia, esse aspernatur! Id mollitia, voluptas eius numquam enim perspiciatis tempora animi?
  Consequatur placeat deserunt quos aliquid? Beatae neque earum eius error. Consequatur amet eveniet expedita ab voluptates, reprehenderit libero a? Maiores dolores ut temporibus molestias eveniet officiis fugit quos soluta dolorem?
  Temporibus quisquam expedita repellendus! Eveniet libero sed omnis esse quis dolorem nihil quae obcaecati placeat! In voluptate possimus excepturi recusandae? Nesciunt nulla impedit explicabo sit neque eius voluptate commodi dolorem?
  Dolorem dicta culpa nobis maiores autem, consequatur fugiat facilis, sit numquam architecto odio unde mollitia vel tempora nostrum consequuntur iusto impedit beatae. Debitis quisquam ab, consequuntur vero quod at inventore.
  Sint cumque quae magnam voluptatibus neque incidunt, cupiditate non provident dolore fugiat rem fugit odio consequatur sit ducimus, deserunt tempore? Sunt esse maiores blanditiis eaque aliquam? Ipsum fugiat optio ducimus?
  Debitis, exercitationem temporibus architecto beatae obcaecati nam eius, doloribus rem cupiditate dicta maiores ipsam minus quibusdam neque porro! Rerum ipsum alias quae dolores error velit ratione praesentium temporibus, neque quod!
  Dicta nihil placeat in sed tempora commodi ipsa officiis voluptatum dolor obcaecati odio nostrum, dignissimos sapiente voluptatibus accusamus quibusdam! Distinctio eum iusto officia repellendus hic corporis soluta quibusdam, vel consequatur?
  Pariatur incidunt deleniti temporibus, accusamus labore vero molestiae reiciendis, nihil optio adipisci voluptates illum nisi quaerat itaque, laudantium rem dolor sint deserunt fugiat maxime aut natus voluptatem perspiciatis. Sint, natus?
  Perferendis dolor earum quo quas ex voluptate accusantium similique ut accusamus doloribus expedita sunt, labore voluptas dolorem sequi sit. Necessitatibus dicta adipisci omnis debitis quo nesciunt at doloremque provident velit.
  Mollitia laborum fugit voluptatibus aut quod tempore accusantium consequuntur voluptates similique saepe facere odio quia possimus atque optio, iusto omnis reprehenderit? Aliquid officia sapiente quidem ex iusto minima molestias quia.
  Accusantium vel dolor in, itaque reiciendis voluptate? Nisi, aperiam. Omnis dolorem quisquam tenetur doloremque voluptatem iusto exercitationem, temporibus in placeat quos porro id, mollitia aspernatur ipsa atque nulla eveniet harum.
  Perspiciatis amet, dolore officia reprehenderit saepe, est ipsa fugiat id laudantium sunt, earum qui possimus consectetur hic laboriosam. Eligendi vel expedita qui fugiat tempore officia cumque nam culpa amet a!
  Hic perferendis molestias, quod, beatae tempora quasi quia esse itaque iure repellendus necessitatibus obcaecati error animi rerum, ut consequatur delectus asperiores expedita in laborum adipisci sequi? Dolor sit laboriosam sequi.
  Illum nam, natus distinctio nulla, cumque sequi fugiat labore quam quisquam voluptate et asperiores sit recusandae nemo aliquam autem. Rerum quas dolorem dolore laudantium mollitia autem labore, doloribus veniam qui?
  Architecto sunt exercitationem quasi reiciendis quas necessitatibus iure error minus inventore corporis velit, distinctio illum ad doloremque hic tempore! Corporis consequuntur delectus amet ratione aliquid voluptas error tempora itaque consectetur!
  Beatae dolores cumque, similique fugit necessitatibus est veniam a. Iste quidem corporis rerum voluptate cum omnis inventore quam numquam ullam, dolores delectus unde alias similique saepe consequuntur est nostrum eum.
  Assumenda esse sed eius. Excepturi natus, animi illum illo suscipit a voluptates incidunt. Beatae, ipsum et animi quos ullam rem enim veniam nesciunt. Mollitia, voluptates corporis quo hic debitis eos.
  Consequuntur ipsa sequi voluptates saepe dolorem molestiae accusamus debitis nam repellat dolorum nihil itaque praesentium nisi explicabo harum perferendis veritatis quidem ullam neque dolores fuga, aliquam repudiandae pariatur quam. In?
  Quas autem, at magnam, ex id voluptas ipsam saepe debitis ut numquam quibusdam adipisci. Dolor necessitatibus eum magni unde, autem quaerat dignissimos corrupti cum dolore excepturi repudiandae vero quidem voluptates?
  Modi officiis odit unde expedita amet asperiores delectus voluptate similique autem hic nemo, obcaecati, adipisci quas alias earum nisi quidem quos? Libero tempore ea laborum nobis reiciendis suscipit fugit quae?
  Commodi molestias at fuga a, eum molestiae ullam quo nemo! Itaque quaerat repudiandae iste ad ut numquam dicta! Nulla ipsa hic mollitia sint nihil voluptatum ex sequi nisi consequatur vitae.
  Quia dolorum velit adipisci facilis eveniet voluptatem ipsa, non, reiciendis doloribus consectetur earum aliquam a obcaecati! Officia culpa ullam voluptas praesentium aspernatur cum? Sequi accusantium recusandae impedit reiciendis earum voluptas.
  Nam, sequi iure, vel nesciunt nihil neque pariatur tempore, doloribus beatae nisi expedita at harum aut voluptas quae natus sapiente sit. Repellat ut maiores libero illum exercitationem accusamus necessitatibus repellendus?
  Aliquam nam illum nostrum sunt possimus fugiat, nobis natus sint, odit, quae eveniet! Consectetur soluta nisi eum eos impedit neque vero quas sint veniam veritatis maiores, provident, exercitationem id laudantium!
  Fugiat dolorum minus, atque pariatur cumque recusandae sint ipsum alias dolor sed adipisci animi voluptates necessitatibus, rem exercitationem autem omnis sit. Odit dicta sequi eligendi blanditiis quis rem iusto numquam.
  Eveniet veniam autem quaerat nam ipsum consequatur possimus tempora quibusdam doloremque tenetur? Incidunt voluptas ullam officia vero quam! Dolores fuga dolorem vel aliquid delectus omnis? Ex, eligendi! Ipsam, voluptatum dolorum!
  Repellat quibusdam dolorum nobis temporibus corrupti quidem, nemo a saepe earum architecto omnis necessitatibus quasi beatae in minus laborum dolore? Tempore sed molestiae facilis molestias repellendus nihil corrupti quaerat delectus?
  Corrupti eius fuga omnis quasi, quam blanditiis cupiditate cumque minima ratione molestias placeat reiciendis accusamus fugiat magnam saepe, tenetur ipsam porro voluptate, odit minus ut totam culpa? Tempore, minima unde!
  Aliquam sint ullam fugiat fugit minus temporibus quibusdam impedit veniam dolor! Non hic voluptatum animi eveniet sapiente. Vitae temporibus ipsum non qui eos similique totam, recusandae fuga iusto modi laborum!
  Voluptatum quisquam quo magnam harum cupiditate quam facilis autem exercitationem dolorem temporibus corrupti eligendi, cum maxime natus ad voluptatem officia, saepe esse nisi. Ipsa, maxime expedita quam deserunt veniam temporibus.
  Eius quae nemo animi aliquid eaque nobis esse ducimus ipsum vitae voluptatum, quas, consequatur, cum architecto molestias facere praesentium porro harum deserunt? Nisi unde laudantium eum, libero alias eos quo!
  Aut, explicabo repellat optio tempore est repudiandae saepe deserunt tenetur iste commodi suscipit rem, ab nobis beatae corrupti cupiditate corporis natus, assumenda culpa? Commodi corporis repellendus error eligendi necessitatibus aliquid?
  Quos, praesentium atque. Esse modi sequi, ad fugiat ipsam numquam ipsa, id deleniti repudiandae aspernatur iste. Quisquam accusantium, saepe impedit ducimus necessitatibus delectus ipsa optio tempore totam eveniet veniam facilis.
  Error nemo suscipit perspiciatis, vel magni distinctio iure consectetur culpa. Expedita fugit corporis eaque accusamus labore quaerat alias, perspiciatis officia necessitatibus consequatur cumque velit quidem. Asperiores quaerat excepturi fuga quos!
  Qui minus, tempore facilis quo exercitationem fugiat natus totam, dolores assumenda architecto sint dolorem atque eaque officiis repellendus eveniet vel nesciunt ad asperiores velit commodi temporibus? Molestias animi nisi dicta.
  Deserunt modi earum labore necessitatibus exercitationem consequuntur consectetur suscipit vel libero sunt fugiat quam adipisci enim doloremque architecto at dicta pariatur eligendi, nostrum ex, provident consequatur sequi laboriosam quis. Sed!
  Itaque voluptate, voluptates inventore sapiente officia enim doloremque reprehenderit quas consectetur, architecto quaerat aut. Magnam sed eum voluptas cum at adipisci nesciunt, molestias harum? Nostrum ex facilis sit eligendi corrupti?
  Accusamus itaque harum voluptates nulla natus soluta qui illum ipsum voluptatem doloremque, nisi, quasi facilis amet et numquam. Doloribus dolorem blanditiis molestias quod repudiandae maiores odio magni eligendi eius minus.
  Qui quibusdam aliquam reiciendis facilis, ducimus excepturi id nemo hic consectetur reprehenderit molestias vitae veniam neque nulla. Ab ratione aspernatur, voluptatum repudiandae exercitationem, nihil numquam accusantium qui distinctio minima libero.
</div>
.con {
  margin: 0 auto;
  max-width: 1000px;
}

.popup-1 {
  width: 200px;
  height: 200px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid black;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.8);
  display: none;
}
.popup-1.active {
  display: block;
}

console.clear();

function Popup1__show() {
  $(".popup-1").addClass("active");
}
function Popup1__hide() {
  $(".popup-1").removeClass("active");
}
$(".btn-popup-1").click(Popup1__show);
$(".popup-1__btn-close").click(Popup1__hide);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.