modal-extras
v1.0.0
Published
Extends the standard Boostrap modal to support things like ajax loading, video players and images.
Downloads
1
Maintainers
Readme
Modal Extras
View the demo here: http://zaneray.github.io/modal-extras/
This script extends the standard Boostrap modal to support things like ajax loading, video players and images. We choose to delete a dynamically created modal window HTML in most cases unless you use the standard inline Bootstrap Modal functionality.
Included Files
Included you will find a demo index.html with examples you will also find the compiled CSS file as well as less files that build the compiled file.
Compiling the CSS
Make sure you have less installed globally npm install less -g
. Then navigate to the directory command line and run a lessc modal-extras.less ../css/modal-extras.css
to compile a new CSS file.
Modal HTML
<a href="#" data-toggle="modal-html" data-id="id-1234">Open HTML modal by ID</a>
Specify a data-toggle
attribute of modal-html
and the link will grab HTML from somewhere on the page. Typically in a hidden div.
Modal Images
<a href="http://www.zaneray.com/proto/images/flatheadsunset.jpg" data-toggle="modal-image">Open horizontal Image Modal </a>
Specify a data-toggle
attribute of modal-image
to load the image in the href
of an anchor link in a modal window.
Modal Videos
<a href="https://vimeo.com/74980365" data-key="74980365" data-source="Vimeo" data-toggle="modal-video">Open Vimeo Video</a>
Specify a data-toggle
of modal-video
to dynamically load the video. It is required to specify a data-key
as well as a data-source
which at the moment only includes Youtube and Vimeo. It is recommended to make the href a link to the URL of the video for Accessbility reasons.
Modal AJAX
Default
<a href="includes/ajax.html" data-toggle="modal-ajax">Open Ajax Modal</a>
By default you can specify a URL and all of that URL will be loaded to the page. Specify data-toggle
of modal-ajax
and the script will grab the URL in the href. This works fine for snippets of HTML but in demo you can see that it loads all of the image from /includes/ajax.html including the header and footer.
Load a Page with Optional Selector
<a href="includes/ajax.html" data-toggle="modal-ajax" data-id="wrapper">Open Ajax Modal id="content"</a>
Optionally you can specify an id and the script will load the whole page and display the results specified in the data-id
selector.
Additional Classes
<a href="http://www.zaneray.com/proto/images/flatheadsunset.jpg" data-toggle="modal-image" data-class="my-additional-class">Open Image with Custom Class </a>
Optionally if you need to override the styling of a modal window you can always specify a custom class with data-class
attribute.
Closing the Modal Window
Pressing escape will close the Modal window for all dynamically created modal windows not including standard inline Bootstrap Modals.