Napoleon's Pixelated Mugshot
    Have ideas to improve npm?Join in the discussion! »

    jbox
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.14 • Public • Published

    jBox

    jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.

    Demo: https://stephanwagner.me/jBox

    Docs: https://stephanwagner.me/jBox/documentation


    Install

    ES6

    npm install --save jbox
    import jBox from 'jbox';
    import 'jbox/dist/jBox.all.css';

    CDN

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.7/dist/jBox.all.min.js"></script>
    <link href="https://cdn.jsdelivr.net/gh/StephanWagner/jBox@v1.2.7/dist/jBox.all.min.css" rel="stylesheet">

    Tooltips

    Create a new instance of jBox Tooltip and attach it to elements:

    new jBox('Tooltip', {
      attach: '.tooltip'
    });

    Now elements with class="tooltip" will open tooltips:

    <span class="tooltip" title="My first tooltip">Hover me!</span>
    <span class="tooltip" title="My second tooltip">Hover me!</span>

    Modal windows

    You can set up modal windows the same way as tooltips. But most of times you'd want more variety, like a title or HTML content:

    new jBox('Modal', {
      width: 300,
      height: 200,
      attach: '#myModal',
      title: 'My Modal Window',
      content: '<i>Hello there!</i>'
    });
    <div id="myModal">Click me to open a modal window!</div>

    Confirm windows

    Confirm windows are modal windows which requires the user to confirm a click action on an element. Give an element the attribute data-confirm to attach it:

    new jBox('Confirm', {
      confirmButton: 'Do it!',
      cancelButton: 'Nope'
    });
    <div onclick="alert('Yay! You did it!')" data-confirm="Do you really want to do this?">Click me!</div>
    <a href="https://stephanwagner.me/jBox" data-confirm="Do you really want to leave this page?">Click me!</a>

    Notices

    A notice will open automatically and destroy itself after some time:

    new jBox('Notice', {
     content: 'Hurray! A notice!'
    });

    Images

    To create image windows you only need following few lines:

    new jBox('Image');
    <a href="/image-large.jpg" data-jbox-image="gallery1" title="My image">
      <img src="/image.jpg" alt="">
    </a>

    Learn more

    These few examples are very basic. The jBox library is quite powerful and offers a vast variety of options to customize appearance and behavior. Learn more in the documentation: https://stephanwagner.me/jBox/documentation

    Install

    npm i jbox

    DownloadsWeekly Downloads

    1,028

    Version

    1.2.14

    License

    MIT

    Unpacked Size

    758 kB

    Total Files

    100

    Last publish

    Collaborators

    • avatar
    • avatar