Skip to content

Latest commit

 

History

History
173 lines (145 loc) · 5.66 KB

load.md

File metadata and controls

173 lines (145 loc) · 5.66 KB

Introduction

Loads content or remote page into a Bootstrap 5 modal dialog with customizable options.supports default dragging, zooming, and maximizing of the modal window.

Usage Example

ESM

import { load } from '@ymlluo/bs5dialog';

load('https://example.com', {
  title: 'Example Modal',
  type: 'primary',
  size: 'md',
  id: 'example-modal',
  centered: true,
  scrollable: true,
  maximize: false,
  backdrop: true,
  focus: true,
  keyboard: true,
  draggable: true,
  resizable: true,
  btnOkText: 'OK',
  btnCancelText: 'Cancel',
  onShow: () => console.log('Modal is shown'),
  onShown: () => console.log('Modal is fully shown'),
  onHide: () => console.log('Modal is hiding'),
  onHidden: () => console.log('Modal is fully hidden'),
  isForm: true,
  onSubmit: () => console.log('Modal is submitted'),
  onSubmitSuccess: () => console.log('Modal is successfully submitted'),
  onSubmitError: () => console.log('Modal submission error'),
  onSubmitDone: () => console.log('Modal submission is done')
});

CJS

const { load } = require('@ymlluo/bs5dialog');

load('https://example.com', {
  title: 'Example Modal',
  type: 'primary',
  size: 'md',
  id: 'example-modal',
  centered: true,
  scrollable: true,
  maximize: false,
  backdrop: true,
  focus: true,
  keyboard: true,
  draggable: true,
  resizable: true,
  btnOkText: 'OK',
  btnCancelText: 'Cancel',
  onShow: () => console.log('Modal is shown'),
  onShown: () => console.log('Modal is fully shown'),
  onHide: () => console.log('Modal is hiding'),
  onHidden: () => console.log('Modal is fully hidden'),
  isForm: true,
  onSubmit: () => console.log('Modal is submitted'),
  onSubmitSuccess: () => console.log('Modal is successfully submitted'),
  onSubmitError: () => console.log('Modal submission error'),
  onSubmitDone: () => console.log('Modal submission is done')
});

UMD

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Load Example</title>
    <!-- Include Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bs5dialog.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
    <script src="../bs5dialog.js"></script>  </head>
  </head>
  <body>
    <button id="example-button">Open Modal</button>
    <script>
      const exampleButton = document.getElementById('example-button');
      exampleButton.addEventListener('click', () => {
        bs5dialog.load('./form.html', {
          title: 'Example Modal',
          type: 'primary',
          size: 'md',
          id: 'example-modal',
          centered: true,
          scrollable: true,
          maximize: false,
          backdrop: true,
          focus: true,
          keyboard: true,
          draggable: true,
          resizable: true,
          btnOkText: 'OK',
          btnCancelText: 'Cancel',
          onShow: () => console.log('Modal is shown'),
          onShown: () => console.log('Modal is fully shown'),
          onHide: () => console.log('Modal is hiding'),
          onHidden: () => console.log('Modal is fully hidden'),
          isForm: true,
          onSubmit: () => console.log('Modal is submitted'),
          onSubmitSuccess: () => console.log('Modal is successfully submitted'),
          onSubmitError: () => console.log('Modal submission error'),
          onSubmitDone: () => console.log('Modal submission is done')
        });
      });
    </script>
  </body>
</html>

Parameters

  • content (string): The content to be loaded into the modal dialog. Can be a URL or HTML content.

  • options (Object): An object containing customizable options for the modal dialog.

  • title (string): The title of the modal dialog.

  • type (string): The type of the modal dialog, which determines the color of the status bar.

  • size (string): The size of the modal dialog.

  • id (string): The ID of the modal dialog.

  • centered (boolean): Whether the modal dialog should be centered on the screen.

  • scrollable (boolean): Whether the modal dialog should be scrollable.

  • maximize (boolean): Whether the modal dialog should be maximize.

  • backdrop (boolean): Whether the modal dialog should have a backdrop.

  • focus (boolean): Whether the modal dialog should be focused.

  • keyboard (boolean): Whether the keyboard should be enabled for the modal dialog.

  • draggable (boolean): Whether the modal dialog should be draggable.

  • resizable (boolean): Whether the modal dialog should be resizable.

  • btnOkText (string): The text to display on the OK button.

  • btnCancelText (string): The text to display on the Cancel button.

  • onShow (function): A function to be called when the modal dialog is shown.

  • onShown (function): A function to be called after the modal dialog is shown.

  • onHide (function): A function to be called when the modal dialog is hidden.

  • onHidden (function): A function to be called after the modal dialog is hidden.

  • isForm (boolean): Whether the modal dialog should be a form.

  • onSubmit (function): A function to be called when the modal dialog is submitted.

  • onSubmitSuccess (function): A function to be called after the modal dialog is successfully submitted.

  • onSubmitError (function): A function to be called if there is an error submitting the modal dialog.

  • onSubmitDone (function): A function to be called after the modal dialog is submitted, regardless of success or failure.

List of Event Listeners

  • bs5:dialog:load:created

  • bs5:dialog:load:rendered

  • bs5:dialog:load:hidden

  • bs5:dialog:load:ok

  • bs5:dialog:load:cancel

If options.isForm is true, when the form is submitted

  • bs5:dialog:form:submit:success
  • bs5:dialog:form:submit:error
  • bs5:dialog:form:submit:complete