Ventana modal de pantalla completa altamente personalizable-njBox

Vista prévia

Descripción

nitialize el njBox es una biblioteca modal JavaScript sencilla, flexible y altamente personalizable que le permite crear ventanas modales adaptables, de pantalla completa y estilo lightbox desde cualquier contenido HTML.

Funcionamiento

Descargue & importar los archivos de njBox en su proyecto Web.

<link href="dist/njBox.css" rel="stylesheet">
<script src="dist/njBox.js"></script>

Envolver el contenido modal en un contenedor que se debe ocultar en la carga de la página.

<div id="modalDiv" style="display: none">Modal Content Here</div>

Cree un elemento desencadenante para alternar la ventana modal a través de atributos de datos HTML:

<a href="#modalDiv" data-toggle="modal">Trigger Element</a>
<!-- or -->
<button data-toggle="modal" data-njb-content="#modalDiv">Trigger Element</button>

O a través del método JavaScript:

<a href="#modalDiv" id="myModal">Trigger Element</a>

var myModal = new njBox('#myModal')

La biblioteca también proporciona un Add-on que le permite crear un lightbox galería donde los usuarios son capaces de cambiar entre las imágenes en la ventana modal al igual que un carrusel.

<script src="dist/njBox-gallery.js"></script>

<div data-njb-gallery="a" data-toggle="modal">

<a href="1.jpg"><img src="1.jpg"></a>

<a href="2.jpg"><img src="2.jpg"></a>

<a href="3.jpg"><img src="3.jpg"></a>
</div>

Para establecer la biblioteca modal, pase el siguiente objeto Options como segundo parámetro al método njBox.

var myModal = new njBox('#myModal',{



//(selector || dom\jQuery element) dom element for triggering modal


elem: '',



 //(string) content for modal


content: undefined,



 //(html || selector || text || template) type of content, if selector used, whole element will be inserted in modal. Template simila to html, but template inserted without .njb__body tag, directly to .njb


type: '',



 //(html) html that will be added as modal header (for first slide)


header: undefined,



 //(html) html that will be added as modal footer (for first slide)


footer: undefined,





 //(string) classnames(separated with space) that will be added to modal wrapper, you can use it for styling (theming)


'class': false,



 //(boolean false || number) zindex that will be set on modal, probably not a good idea to use this option, set it in css and use o.class instead


zindex: false,



 //(selector) appends modal to specific element


container: 'body',



 //(fixed || absolute), how popup will be positioned. For most cases fixed is good, but when we insert popup inside element, not document, absolute position sets automatically


position: 'fixed',



 //(boolean) should we set click handler on element(o.elem)?


click: true,



 //(selector || dom\jQuery element) additional elements that can trigger same modal window (very often on landing pages you need few buttons to open one modal window)


clickels: '',



 // //(boolean) should we show backdrop?


backdrop: true,



 //(boolean) if true, animation durations of modal will automatically sets to backdrop to be in sync (it can be calculatied automatically from css)


backdropassist: true,



 //(show || hide) should we hide scrollbar from page?


scrollbar: 'hide',



 //(boolean) click outside modal will close it, false also adds fancy animation when somebody tries to close modal with outside click


out: true,



 //(boolean) close modal when esc button pressed?


esc: true,



 //(inside || outside || boolean false) add close button inside or outside popup or don't add at all


close: 'outside',



 //(boolean || image) should we set maximum height of modal? if image is selected, only images will be autoheighted


autoheight: 'image',



 //(boolean false, selector) set focus to element, after modal is shown, also you may use autofocus attribute without this option


autofocus: false,



 //(boolean) focus previous modal window
(case when we open two or more modal windows)


focusprevious: true,



 //(string || boolean false) title (usually for image)


title: false,



 //(string || boolean false) attribute from which we gather title for slide (used basically in images)


title_attr: 'title',



 //(load || ready) we should wait until img will fully loaded or show as soon as size will be known (ready is useful for progressive images)


img: 'ready',



 //(init || show) should we load gallery images on init(before dialog open) or on open


 imgload: 'show',



 //(false || string) name of animation, or string with space separated 2 names of show/hide animation (default same as `scale scale`). 2 predefined animations are built in: scale and fade.


anim: 'scale',



 //(string) additional class that will be added to modal window during animation (can be used for animate.css or other css animation libraries)


animclass: 'animated',



 //(string || number || auto) duration of animations, or string with space separated 2 durations of show/hide animation. You can set 'auto 100' if you want to set only duration for hide. It should be used when problems with auto detection (but I have not seen this problem ^^)


duration: 'auto',



 //link to jquery (for modules without global scopr)


jquery: undefined,



 //(selector) this elements we will try to focus in popup shown after option o.autofocus


_focusable: 'a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]',



 //(selector) selector that will be used for autobind (can be used only with changing global default properties) Set it after njBox.js is inserted njBox.defaults.autobind = '.myAutoBindSelector'


autobind: '[data-toggle~="box"], [data-toggle~="modal"]',



 //custom template


templates: {



wrap: '<div class="njb-wrap"><div class="njb-items"></div></div>',



backdrop: '<div class="njb-backdrop"></div>',



modalOuter: '<div class="njb-outer"></div>',



modal: '<div class="njb" tabindex="-1" role="dialog"></div>',



body: '<div class="njb__body" role="document" data-njb-body></div>',



header: '<header class="njb__header" data-njb-header></header>',



footer: '<footer class="njb__footer" data-njb-footer></footer>',



close: '<button type="button" class="njb-ui__close" data-njb-close><span aria-hidden="true">×</span></button>',



focusCatcher: '<div tabindex="0" class="njb-focus-catch"></div>',




preloader: '<div class="njb-preloader"><div class="njb-preloader__inner"><div class="njb-preloader__bar1"></div><div class="njb-preloader__bar2"></div><div class="njb-preloader__bar3"></div></div></div>',



ui: '<div class="njb-ui"></div>',



title: '<div class="njb-ui__title"><div class="njb-ui__title-inner" id="njb-title" data-njb-title></div></div>' //id in title used for accessibility


},



// custom text


text: {



_missedContent: 'njBox plugin: meow, put some content here...', //text for case, when slide have no content



preloader: 'Loading...', //title on preloader element



imageError: '<a href="%url%">This image</a> can not be loaded.',



close: 'Close dialog', //title on close button



ok: 'Ok', //text on 'ok' button when dialog modal(alert, prompt, confirm) or in any other custom type



cancel: 'Cancel', //text on 'cancel' button when dialog modal(alert, prompt, confirm) or in any other custom type



placeholder: '' //placeholder for prompt input


}



})

También se le permite config el modal directamente a través de los atributos HTML ' Data-Option ' como estos:

<a href="#modalDiv"


id="myModal"


data-njb-backdrop="false"


data-njb-close="inside"


data-njb-scrollbar="show">


 Trigger Element
</a>