# 팝업 - CSS로 어떻게 만들지?

**URL:** https://meta.discourse.org/t/pop-up-how-to-css/226462
**Category:** Support
**Created:** [5월 8, 2022, 1:27오후 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462 "2022-05-08T13:27:19Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [5월 8, 2022, 1:27오후 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/1 "2022-05-08T13:27:19Z")

</div>

사용자들이 일일 좋아요 한도 도달 시 표시되는 팝업이 너무 넓고 모바일 친화적이지 않다고 보고하고 있습니다.

재현을 시도하고 있는데, 실제로 특정 수의 게시물을 좋아요하지 않고 알림 팝업을 띄우는 방법을 모르겠습니다.

의견 있으신 분 계신가요?

감사합니다!

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [5월 9, 2022, 9:43오전 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/3 "2022-05-09T09:43:58Z")

</div>

제가 생각한 가장 좋은 방법은 해당 한도를 제어하는 사이트 설정을 변경할 수 있는 텍스트 사이트를 사용하거나, try.discourse.org에서 하루 후에 좋아요가 삭제되도록 하는 것입니다.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [5월 9, 2022, 9:46오전 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/4 "2022-05-09T09:46:28Z")

</div>

테스트 사이트에서 좋아요 제한을 하루 1개로 줄였는데, 받은 경고 팝업은 최대 좋아요 수를 초과한 것이 아니라 '속도를 줄여주세요’라는 경고였습니다. 다만 폰에서는 팝업 크기는 적절하게 표시되었습니다.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [5월 9, 2022, 10:24오전 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/5 "2022-05-09T10:24:47Z")

</div>

저도 확인해 봤는데 모바일에서는 정상적으로 작동합니다. 제 최선의 제안은 모달에 사용자 지정 CSS를 사용하거나, 보고를 한 사용자가 데스크톱 뷰를 사용 중일 수 있다는 것입니다. 🙂

---

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [5월 9, 2022, 10:38오전 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/6 "2022-05-09T10:38:07Z")

</div>

@JammyDodger @Don @pfaffman 좋습니다! 감사합니다.

하지만 제 포럼에서 이를 재현하는 방법은 무엇인가요? 이렇게 하면 해당 클래스를 찾아서 맞춤형 CSS를 적용할 수 있을 것 같습니다.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [5월 9, 2022, 10:45오전 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/7 "2022-05-09T10:45:03Z")

</div>

제 재현 방법이 완벽하지는 않았지만, `max likes per day` 관리자 설정을 충분히 낮게 변경한 후 TL2 test\_user로 확인해 보았습니다.

하지만 이 메시지를 받았습니다:

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/b/6/ab68391f9bea75eb3116a3c75dc9c32e34d8b7ad.png)

(왜 초 단위로 표시되는지 이제 이유를 알아내야 할 것 같습니다 🙂)

**수정:** Reactions 플러그인이 활성화되어 있기 때문이라는 것을 바로 깨달았습니다. 🙂

여기서는 플러그인을 비활성화한 상태이고, 이제 모바일로 확인해 보겠습니다.

 ![desktop](https://global.discourse-cdn.com/meta/original/4X/7/1/9/71989e203d8a8428574db1bdfbaffd3eec989f27.png)  
 ![mobile](https://global.discourse-cdn.com/meta/original/4X/5/e/a/5ea99619bf3f676bbe2189b857101988da952299.jpeg)

@Don의 의견에 동의합니다. 해당 사용자가 모바일에서 데스크톱 버전을 사용하고 있지 않은지 확인해 보시는 것이 좋겠습니다.

---

<div class="post-metadata">

### Author: ![sok777](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@sok777](https://meta.discourse.org/u/sok777)
#### Post date: [5월 9, 2022, 12:28오후 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/8 "2022-05-09T12:28:35Z")

</div>

좋은 아이디어입니다!  
플러그인과 테마를 몇 개 사용 중이라 그 때문일 수도 있겠네요. 사용자에게 “잘못을 묻기” 전에 😅 먼저 확인하고 싶을 뿐입니다.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [5월 9, 2022, 12:34오후 UTC](https://meta.discourse.org/t/pop-up-how-to-css/226462/9 "2022-05-09T12:34:48Z")

</div>

테마나 플러그인 때문일 수 있다고 생각되면, 안전 모드에서 오류를 재현해 보시고 모달 폭에 어떤 영향을 미치는지 확인해 보시는 것도 좋습니다.

참고로, 포럼의 햄버거 메뉴에서 데스크톱/모바일 뷰를 스타일링하여 숨겼을 경우를 대비해 해당 링크를 아래에 공유드립니다. (이렇게 하면 사용자가 실수로 해당 기능을 사용하기는 어렵겠지만, 실제로 그런 경우가 있었던 적도 있습니다 🙂)

데스크톱 뷰: `[YourSite]/?mobile_view=0`  
모바일 뷰: `[YourSite]/?mobile_view=1`
