Native Modal

Native modal component with enhancements and customisation


Originally hidden, attached full modal.

Originally hidden, attached modal content only.

How to use various content sources


<script>
	nui.modal('<b>HTML</b> string')
</script>
Open a modal with external file content
<a target="_blank" href="index.html#sidebar" class="n-modal-link">Open a modal with external file content</a>
<button data-href="index.html#sidebar" class="n-modal-link">Open a modal with external file content via a button</button>
<dialog class="n-modal" id="modal1">
	<button class="n-modal__close"></button>
	<div class="n-modal__content">
		...
	</div>
</dialog>
<button class="n-modal-link" data-for="modal1">Open an attached modal</button>
<script>
	nui.modal(document.getElementById('modal1'));
</script>
<script>
	var modal = document.createElement('dialog');
	modal.classList.add('n-modal');
	modal.innerHTML = `
		<button class="n-modal__close"></button>
		<div class="n-modal__content">
			<p>Originally detached modal.</p>
		</div>
	`;
	nui.modal(modal);
</script>
<div class="n-modal__content" id="modal2">
	...
</div>
	
<button class="n-modal-link" data-for="modal2">Open a modal with attached, hidden content</button>
<div id="modal3">...</div>

<button class="n-modal-link" data-for="modal3">Open a modal with attached content</button>
<script>
	let p = document.createElement('p'); 
	p.innerText = 'Detached paragraph';
	nui.modal(p);
</script>

How to customise the presentation


Custom animation
<a target="_blank" href="index.html" class="n-modal-link" data-anim="[{ &quot;opacity&quot;: 0 }, { &quot;opacity&quot;: 1 }]">Open a modal with custom animation</a>
<button data-href="index.html#sidebar" class="n-modal-link" data-anim="[{ &quot;opacity&quot;: 0 }, { &quot;opacity&quot;: 1 }]">Custom animation</button>
<script>
	nui.modal({content: 'Custom animation', animation: '[{ "opacity": 0 }, { "opacity": 1 }]'});
</script>
Shadow
<a target="_blank" href="index.html" class="n-modal-link n-modal--shadow">Shadow</a>
<button data-href="index.html" class="n-modal-link n-modal--shadow">Shadow</button>
<script>
	nui.modal({content: 'Shadow', shadow: true})
</script>
<dialog class="n-modal n-modal--shadow" id="modal-shadow">
	<button class="n-modal__close"></button>
	<div class="n-modal__content"> ... </div>
</dialog>

<script>
	nui.modal(document.getElementById('modal-shadow'));
</script>
Rounded
<a target="_blank" href="index.html" class="n-modal-link n-modal--rounded">Rounded</a>
<button data-href="index.html" class="n-modal-link n-modal--rounded">Rounded</button>
<script>
	nui.modal({content: 'Rounded', rounded: true})
</script>
<dialog class="n-modal n-modal--rounded" id="modal-rounded">
	<button class="n-modal__close"></button>
	<div class="n-modal__content"> ... </div>
</dialog>

<script>
	nui.modal(document.getElementById('modal-rounded'));
</script>
Full modal
<a target="_blank" href="index.html" class="n-modal-link n-modal--full">Full modal</a>
<button data-href="index.html" class="n-modal-link n-modal--full">Full</button>
<script>
	nui.modal({content: 'Full', full: true});
</script>
<dialog class="n-modal n-modal--full" id="modal-full">
	<button class="n-modal__close"></button>
	<div class="n-modal__content"> ... </div>
</dialog>

<script>
	nui.modal(document.getElementById('modal-full'));
</script>
Blur
<a target="_blank" href="index.html" class="n-modal-link n-modal--blur">Blur</a>
<button data-href="index.html" class="n-modal-link n-modal--blur">Blur</button>
<script>
	nui.modal({content: 'Blur', blur: true});
</script>
<dialog class="n-modal n-modal--blur" id="modal-blur">
	<button class="n-modal__close"></button>
	<div class="n-modal__content"> ... </div>
</dialog>

<script>
	nui.modal(document.getElementById('modal-blur'));
</script>
Custom Close button
<a target="_blank" href="index.html" class="n-modal-link" data-close-symbol="⤫" data-close-label="Close this modal">Custom Close button</a>
<button data-href="index.html" class="n-modal-link" data-close-symbol="⤫" data-close-label="Close this modal">Custom Close button</button>
<script>
	nui.modal({content: 'Custom Close button', closeSymbol: '⤫', closeLabel: 'Fermer'});
</script>
<dialog class="n-modal" id="modal1">
	<button class="n-modal__close" aria-label="Fermer" data-close-symbol="Schliessen"></button>
	<div class="n-modal__content"> ... </div>
</dialog>

<script>
	nui.modal(document.getElementById('modal1'));
</script>

Options