
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
native-modal
Advanced tools
Package is available on npm and can be installed from the command line.
$ npm i native-modal
You can also download or link to the latest compiled version using the CDN.
https://unpkg.com/native-modal/dist/native-modal.min.js
See simple usage with attribute based modals.
import { initNativeModal } from 'native-modal'
initNativeModal() // register attrs handling
<!-- pass `dialog` selector in attr -->
<button data-modal-open="dialog">Show modal</button>
...
<dialog>
<h2>NativeModal</h2>
<p>Hello, click on OK to close modal.</p>
<button data-modal-close>OK</button>
</dialog>
Appearance The original modal window doesn't have any styles, so you'll need to style the dialog box yourself or use ready-made themes, or even write your own theme.
<button data-modal-open="#first">Open first</button>
<button data-modal-open="#second">Open second</button>
...
<dialog id="first">
<h2>First!</h2>
<p>Hello, click on OK to close modal.</p>
<button data-modal-close>OK</button>
</dialog>
<dialog id="second">
<h2>I am second</h2>
<p>Hello, click on OK to close modal.</p>
<button data-modal-close>OK</button>
</dialog>
You can modify the behavior of the modal window by passing parameters to the dialog box. It's very simple. Let's look at an examples:
esc
closingBy default, an open dialog box can be closed using esc
.
We can prevent this by passing the parameter disable-esc
.
<button data-modal-open="dialog">Open modal</button>
...
<dialog disable-esc>
<h2>Hello</h2>
<p>Pressing <code>esc</code> has no effect</p>
<button data-modal-close>Good</button>
</dialog>
You can set a props once
so that the modal window is triggered only once.
<button data-modal-open="dialog">Open modal</button>
...
<dialog once>
<h2>Onetime</h2>
<p>You'll only see me once, thank attribute <code>once</code>. </p>
<button data-modal-close>Thx for once</button>
</dialog>
Take note Don't forget, this example will work only once, you will need to refresh the page to reopen the modal window example.
Add delay to opening modal via show-delay
<button data-modal-open="dialog">Open modal</button>
...
<dialog disable-esc show-delay="2000">
<h2>Hello</h2>
<p>Also pressing <code>esc</code> has no effect</p>
<button data-modal-close>Cool</button>
</dialog>
To control modal windows from a script, you can use the Modal
class.
First, we need to define the modal structure of the DOM
<dialog id="modal">
<h2>Modal</h2>
<p>Hello, click on OK to close modal.</p>
<button data-modal-close>OK</button>
</dialog>
Next, we need to create a Modal instance:
import { Modal } from 'native-modal'
const modal = new Modal('#modal')
modal.open() // Yeah, you open me!
modal.close() // easy to close!
Okay, how do I apply the parameters? Let's look at an example:
import { Modal } from 'native-modal'
const modal = new Modal('#modal', {
animation: true, // enable open/close animation
disableEsc: true, // prevent esc closing
})
modal.open() // Well done!
You can easily customize the content of your modal window, this package gives you a simple wrapper to work with your modal window, its appearance is solely your responsibility.
v0.0.5
FAQs
NativeModal - tiny wrapper over the <dialog />. No overhead scripts. Just modal.
The npm package native-modal receives a total of 0 weekly downloads. As such, native-modal popularity was classified as not popular.
We found that native-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.