npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

modal-extras

v1.0.0

Published

Extends the standard Boostrap modal to support things like ajax loading, video players and images.

Downloads

1

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.