Popup

Beautiful, modern overlay windows for presenting various types of media

You can include this functionality in your element with the following:

{
    computed:{
        vendors(){
            return ['popup_js','popup_css'];
        }
    }
}

There are two main styles of coding when using Popup. Each of these styles has advantages and disadvantages, and you can combine the two.

Add a data-beae-popup attribute to any element to enable Popup

If you wish to customize options, simply overwrite default click handler:

BeaePopup.bind("[data-beae-popup]", {  
//Your option here
});

You can choose any CSS selector here to attach click handler to the currently selected set of elements as well as all future matching elements.

NOTE

Galleries are created by adding the same attribute data-beae-popup value to multiple elements.
Use data-src or href attribute to specify the source of the content.
Optionally, add a data-caption attribute to show a caption under the content.

Media types

Popup itself only displays HTML content. Additional media type support is provided by plugins that are included by default:

Image for images;
HTML for inline content, iframes, videos (HTML5, Youtube and Vimeo), Google maps, and Ajax.

A frequent question is - "Does it support PDF?". First, you have to understand that PDF is a complex file format. Parsing and rendering PDFs is outside the scope of this project.

However, there are two options:

Simply link to a PDF file (optionally, use data-type="pdf" attribute):

<a data-beae-popup data-type="pdf" href="YOUR_PDF_FILE.pdf">Click me</a>

Copy

Popup will then create iframe element and will use file URL as src attribute. It will work very well on computers with modern browsers.

If you're concerned about users using outdated browsers or using mobile devices, you can use PDF.js. Download and extract files on the root directory of your project. Then create links like this:

<a  data-beae-popup  data-type="pdf"  href="/pdfjs/web/viewer.html?file=YOUR_PDF_FILE.pdf"  >Click me</a>

API

Initialization

Popup an be launched via standard constructor interface:

const popup = new BeaePopup([  {   
        src: "<p>Your text here</p>",   
        
          type: "html", 
  }
  ]);

It is also possible to launch Popup using static method BeaePopup.show():

const popup = BeaePopup.show([  {   
  src: "https://your-image.com/abc.jpg",    
  type: "image", 
   },
   ]);

If you wish to launch Popup when user clicks or taps on HTML elements, add default data-beae-popup attribute or use API bind() method to attach click handler to the selected items, as well as all future matching elements. You will then be able to retrieve instance object from any event callback. Example:

<div id="gallery">
  <a href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/300x225" />
  </a>

  <a href="https://via.placeholder.com/800x600">
    <img src="https://via.placeholder.com/300x225" />
  </a>
</div>

<script>
  BeaePopup.bind("#gallery a", {
    on : {
      ready : (popup) => {
        console.log(`popup #${popup.id} is loaded!`);
      }
    }
  });
</script>

Instance methods are available after Popup's initialization.

const popup = new BeaePopup([
  {
    src: "<h2>Hello, dawn</h2><p>I'm ok</p>",
    type: "html",
  },
  {
    src: "https://via.placeholder.com/800x600",
    type: "image",
  },
]);

// Methods usage examples:
popup.next();
popup.close();

Instance Methods

close([event: ClickEvent]): void#

Start closing the current instance.

next(): void#

Slide carousel to next page.

prev(): void#

Slide carousel to previous page.

jumpTo([args: any]): void#

Slide carousel to selected page with optional parameters. Examples:

BeaePopup.getInstance().jumpTo(2);
BeaePopup.getInstance().jumpTo(3, { friction: 0 });

getSlide(): Object|null#

Get the active slide. This will be the first slide from the current page of the main carousel.

focus([event: FocusEvent]): void#

Place focus on the first focusable element inside current slide.

hideScrollbar(): void#

Hide vertical page scrollbar and adjust body right padding value to prevent content from shifting (otherwise the body element may become wider and the content may expand horizontally).

revealScrollbar(): void#

Stop hiding vertical page scrollbar.

clearContent(slide: Object): void#

Remove content for given slide.

setContent(slide: Object, html: HTMLElement|String[, options: Object]): void#

Set new content for given slide.

showLoading(slide: Object): void#

Create loading indicator inside given slide.

hideLoading(slide: Object): void#

Remove loading indicator from given slide.

Static Methods

bind(selector: String[, options: Object]): void#

Attach a click handler function that starts Popup to the selected items, as well as to all future matching elements.

unbind(selector: String): void#

Remove the click handler that was attached with bind()

show(items: Object[, options: Object]): BeaePopup#

Create new BeaePopup instance with provided options.

getInstance([id: String|Numeric]): BeaePopup|null#

Retrieve instance by identifier or the top most instance, if identifier is not provided.

close([all: Boolean]): void#

Close all or topmost currently active instance.

destroy(): void#

Immediately destroy all instances (without closing animation) and clean up all bindings.

Options

The following are the default options set by the core of the BeaePopup component.

startIndex {Number}#

Index of active slide on the start. Default: 0

preload {Number}#

Number of slides to preload before and after active slide. Default: 1

infinite {Boolean}#

Should navigation be infinite. Default: true

showClass {String|false}#

Class name to be applied to the content to reveal it. Default: beae-popup-zoomInUp Possible values: beae-popup-fadeIn, beae-beae-popup-zoomInUp or false.

hideClass {String|false}#

Class name to be applied to the content to hide it. Default: beae-popup-fadeOut Possible values: beae-popup-fadeOut, beae-popup-zoomOutDown or false.

animated {Boolean}#

Should backdrop and UI elements fade in/out on start/close. Default: true

hideScrollbar {Boolean}#

If browser scrollbar should be hidden. Default: true

parentEl {HTMLElement|null}#

Element containing main structure. Default: null Note: If no element is specified, the container will be added to the end of the list of children of document.body.

mainClass {String|null}#

Custom class name or multiple space-separated class names for the container. Default: null

autoFocus {Boolean}#

Set focus on first focusable element after displaying content. Default: true

trapFocus {Boolean}#

Trap focus inside BeaePopup. Default: true

placeFocusBack {Boolean}#

Set focus back to trigger element after closing BeaePopup. Default: true

click {String|function}#

Action to take when the user clicks on the backdrop. Default: close Possible values: close, next or custom function.

closeButton {String}#

Position of the close button. Default: inside Possible values: inside (over the content) or outside (at top right corner of viewport).

dragToClose {Boolean}#

Allow user to drag content up/down to close instance. Default: true

keyboard {Object|false}#

Enable keyboard navigation. Default:

{
  Escape: "close",
  Delete: "close",
  Backspace: "close",
  PageUp: "next",
  PageDown: "prev",
  ArrowUp: "next",
  ArrowDown: "prev",
  ArrowRight: "next",
  ArrowLeft: "prev",
}

Note: Use KeyboardEvent.code as object keys and any API instance method as value.

template {Object}#

HTML templates for various elements. Default:

{
  // Close button icon
  closeButton:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',
  // Loading indicator icon
  spinner:
      '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>',
  // Main container element
  main: null,
}

Note: If the template.main option is not provided, the structure is generated as follows by default:

<div
  class="beae-popup__container"
  role="dialog"
  aria-modal="true"
  aria-hidden="true"
  aria-label="{{MODAL}}"
  tabindex="-1"
>
  <div class="beae-popup__backdrop"></div>
  <div class="beae-popup__carousel"></div>
</div>

l10n {Object}#

Localization of strings. Default:

{
  CLOSE: "Close",
  NEXT: "Next",
  PREV: "Previous",
  MODAL: "You can close this modal content with the ESC key",
  ERROR: "Something Went Wrong, Please Try Again Later",
  IMAGE_ERROR: "Image Not Found",
  ELEMENT_NOT_FOUND: "HTML Element Not Found",
  AJAX_NOT_FOUND: "Error Loading AJAX : Not Found",
  AJAX_FORBIDDEN: "Error Loading AJAX : Forbidden",
  IFRAME_ERROR: "Error Loading Page",
}

Events

You can listen for events using your BeaePopup instance. You can use the on() or once() API methods, it is also possible to use on or once options to set event callbacks when initialing BeaePopup.

The first argument received by each callback is a reference to the current BeaePopup instance, except for the wildcard * event, where the event name is the first.

By default, BeaePopup preloads the next and previous slides, which means that content will be loaded on all these slides, and all lifecycle events will be called for each slide.

#1 Example#

BeaePopup.bind("[data-beae-popup]", {
  on: {
    load: (popup, slide) => {
      console.log(`#${slide.index} slide is loaded!`);
      console.log(
        `This slide is selected: ${popup.getSlide().index === slide.index}`
      );
    },
  },
});

#2 Example#

const popup = new BeaePopup([
  {
    src: "https://lipsum.app/id/1/800x600",
    type: "image",
  },
]);

popup.on("done", (popup, slide) => {
  console.log(`done!`);
});

#3 Example#

new BeaePopup(
  [
    {
      src: "https://lipsum.app/id/1/800x600",
      type: "image",
    },
  ],
  {
    on: {
      "*": (event, popup, slide) => {
        console.log(`event: ${event}`);
      },
      "Carousel.createSlide": (popup, carousel, slide) => {
        console.log(slide.$el);
      },
      done: (popup, slide) => {
        console.log(`done!`);
      },
    },
  }
);

Name

Description

init

Initialization has started, plugins have been attached

initLayout

Layout has been initialized

initCarousel

Main carousel has been initialized

ready

Initialization has been completed

load

One of the slides has content loaded, but it's not ready yet

reveal

Content is ready to be revealed on one of the slides

done

Content has been revealed on one of the slides

keydown

A key is pressed

shouldClose

Closing has begun and can be prevented; cancelable

closing

Closing has not been prevented is proceeding

destroy

Closing has completed

PreviousShopify option selection NextTheme development

Last updated 2 years ago