---
title: "Discussion on \"How to Close Modal by Clicking Outside The Modal\" | Hashnode"
description: "Discussion on \"How to Close Modal by Clicking Outside The Modal\". Unlock a popup modal experience in Next.js, React and Tailwind CSS. Learn to close modals by clicking outside of the modal."
url: "https://hashnode.com/posts/how-to-close-modal-by-clicking-outside-the-modal/657ae859df5d4c3ea6cfa5af"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Close Modal by Clicking Outside The Modal](https://blog.segunajibola.com/how-to-close-modal-by-clicking-outside-the-modal?utm_source=hashnode&utm_medium=feed)

Unlock a popup modal experience in Next.js, React and Tailwind CSS. Learn to close modals by clicking outside of the modal.

Dec 14, 2023 · 6 min read · blog.segunajibola.com  
Updated Dec 15, 2023  
Read the article

-   [#nodejs](https://hashnode.com/tag/nodejs)
-   [#modal](https://hashnode.com/tag/modal)
-   [#onclick](https://hashnode.com/tag/onclick)
-   [#event-listener](https://hashnode.com/tag/event-listener)
-   [#tailwind-css](https://hashnode.com/tag/tailwind-css)
-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#webdev](https://hashnode.com/tag/webdev)
-   [#github](https://hashnode.com/tag/github)
-   [#usestate](https://hashnode.com/tag/usestate)
-   [#functional-programming](https://hashnode.com/tag/functional-programming)

## Written by

[Segun Ajibola](https://hashnode.com/@segunajibola)

@segunajibola · Lagos, Nigeria

  
[View profile](https://hashnode.com/@segunajibola)

👨🏿‍💻 Frontend Developer | 📝 Technical Writer | 🔓 Open-Source Contributor

I'm a front-end web developer, enjoys working with TailwindCSS and React. Love to contribute to Open Source and meet new people on Twitter.

## Responses 1

Markdown supported · ⌘↵ to post

[Devesh Kumar](https://hashnode.com/@dev530)

[Dec 17, 2023](https://hashnode.com/posts/how-to-close-modal-by-clicking-outside-the-modal/657ae859df5d4c3ea6cfa5af/comment/657efc4503e6d4749ad8a19b)

we can use useEffect hook in react for this purpose, isn't we.

[Segun Ajibola](https://hashnode.com/@segunajibola)

[Dec 18, 2023](https://hashnode.com/posts/how-to-close-modal-by-clicking-outside-the-modal/657ae859df5d4c3ea6cfa5af/comment/657efc4503e6d4749ad8a19b#reply-6580ae880322c401839296f4)

yes, surely.

[Segun Ajibola](https://hashnode.com/@segunajibola)

[Dec 18, 2023](https://hashnode.com/posts/how-to-close-modal-by-clicking-outside-the-modal/657ae859df5d4c3ea6cfa5af/comment/657efc4503e6d4749ad8a19b#reply-6580aea00322c40183929744)

thanks for checking this out.