Rendered
This is an example of how html is rendered.
With the following options you can change id and class the way you want.
<!DOCTYPE html>
<html>
<head></head>
<body class="nkdialog-opened nkdialog-fixed">
...
<!-- START: NkDialog -->
<div id="nkdialog-container" class="origin outer inner bg-disabled full-size full-width full-height">
<div id="nkdialog-bg"></div>
<!-- When close.offset value is outer -->
<div id="nkdialog-close">...</div>
<div id="nkdialog-wrapper" style="max-width:640px;">
<div id="nkdialog-section">
<!-- When close.offset value is inner -->
<div id="nkdialog-close">...</div>
<div id="nkdialog-wrap">
<header id="nkdialog-header">
<h2 id="nkdialog-title">
...
</h2>
</header>
<div id="nkdialog-content" style="max-height:50vh;">
...
</div>
<footer id="nkdialog-footer">
...
</footer>
</div><!-- #nkdialog-wrap -->
</div><!-- #nkdialog -->
</div><!-- #nkdialog-wrapper -->
</div><!-- #nkdialog-container -->
<!-- END: NkDialog -->
</body>
</html>
ids
feature | Property | Type | Default | Description |
---|---|---|---|---|
ids | container | string | 'nkdialog-container' | Dialog popup content id |
ids | wrapper | string | 'nkdialog-wrapper' | sameAs |
ids | section | string | 'nkdialog' | sameAs |
ids | inner | string | 'nkdialog-inner' | sameAs |
ids | header | string | 'nkdialog-header' | sameAs |
ids | title | string | 'nkdialog-title' | sameAs |
ids | content | string | 'nkdialog-content' | sameAs |
ids | footer | string | 'nkdialog-footer' | sameAs |
ids | close | string | 'nkdialog-close' | sameAs |
ids | bg | string | 'nkdialog-bg' | sameAs |
classes
feature | Property | Type | Default | Description |
---|---|---|---|---|
classes | skin | string | 'origin' | Add a class to a container tag |
classes | opened | string | 'nkdialog-opened' | Add a class to a body tag |
classes | fixed | string | 'nkdialog-fixed' | sameAs |