Comments (5)
Thanks for the bug report, we'll fix with the upcoming update.
from preline.
Hi, @Abdourrahman -
We've fixed it! It should be [--overlay-backdrop:*]
See Modal Static Backdrop. Also, you can see the full JS behaviors here
Thanks!
from preline.
Hello, in this example on overlay doc page, it does not set --overlay-backdrop:static
in the classes, yet it does not close when clicking outside of the modal. Am I missing something?
from preline.
Hi @xysun,
Thanks for the heads up!
Here's a complete code of that example with the fix.
<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-basic-modal">
Open modal
</button>
<div id="hs-basic-modal" class="hs-overlay hidden w-full h-full fixed top-0 start-0 z-[60] overflow-x-hidden overflow-y-auto pointer-events-none">
<div class="hs-overlay-open:opacity-100 hs-overlay-open:duration-500 opacity-0 transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
<div class="flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
<h3 class="font-bold text-gray-800 dark:text-white">
Modal title
</h3>
<button type="button" class="flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-basic-modal">
<span class="sr-only">Close</span>
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="p-4 overflow-y-auto">
<p class="mt-1 text-gray-800 dark:text-gray-400">
This is a wider card with supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-gray-700">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-basic-modal">
Close
</button>
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">
Save changes
</a>
</div>
</div>
</div>
</div>
Where it was missing two pointer-events-none
and pointer-events-auto
classes
<div id="hs-basic-modal" class="hs-overlay ... pointer-events-none">
<div class="hs-overlay-open:">
<div class="... pointer-events-auto ...">
...
</div>
</div>
</div>
from preline.
Thank you!
from preline.
Related Issues (20)
- Issue: Some JavaScript behavior options are not functioning correctly, and there is a lack of precise documentation regarding their usage HOT 1
- Preline Dropdown only works after hard refresh HOT 7
- Instructions for Selecting an Option in HSSelect
- Documentation needs improvements regarding JS options & methods , with some options not working or lacking information!
- Steps on number input
- collapse component not working on chrome, works in Firefox HOT 1
- Scrolling bug in the Scrollspy plugin in Chrome HOT 1
- Advanced Select Not displayed as expected in Nextjs HOT 1
- Vertically centered modals don't work HOT 3
- layout shift due to removal of scroll bar in browser HOT 2
- Second level dropdown does not work in firefox but does work in chrome HOT 1
- Search Issue with Non-Latin Characters in Select Plugin HOT 1
- Preline doesn't work with Solid.js and solid-start HOT 1
- Functions not working in React-Inertia project HOT 2
- javascript plugin not working HOT 1
- Preline Javascript plugin not working HOT 3
- Cannot dismiss opened Advanced Select controls while using FireFox HOT 3
- Unable to use Preline Examples in Remix App HOT 2
- Add option and select option HOT 1
- Conflict using Splide JS with Preline Tabs HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preline.