Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Popups

Custom Popup

Try it yourself:


For more details please see Custom Popup Concept.

Edit in JSFiddle

HTML

<div id="froala-editor">
  <p>Click on the "Show Popup" star icon to see the custom popup.</p>
</div>

CSS

<style>
  .custom-layer {
    text-align: center;
    padding: 10px;
  }
</style>

JAVASCRIPT

<script>
  // Define popup template.
  FroalaEditor.POPUP_TEMPLATES["customPlugin.popup"] = '[_BUTTONS_][_CUSTOM_LAYER_]';

  // Define popup buttons.
  Object.assign(FroalaEditor.DEFAULTS, {
    popupButtons: ['popupClose', '|', 'popupButton1', 'popupButton2'],
  });

  // The custom popup is defined inside a plugin (new or existing).
  FroalaEditor.PLUGINS.customPlugin = function (editor) {
    // Create custom popup.
    function initPopup () {
      // Popup buttons.
      var popup_buttons = '';

      // Create the list of buttons.
      if (editor.opts.popupButtons.length > 1) {
        popup_buttons += '<div class="fr-buttons">';
        popup_buttons += editor.button.buildList(editor.opts.popupButtons);
        popup_buttons += '</div>';
      }

      // Load popup template.
      var template = {
        buttons: popup_buttons,
        custom_layer: '<div class="custom-layer">Hello World!</div>'
      };

      // Create popup.
      var $popup = editor.popups.create('customPlugin.popup', template);

      return $popup;
    }

    // Show the popup
    function showPopup () {
      // Get the popup object defined above.
      var $popup = editor.popups.get('customPlugin.popup');

      // If popup doesn't exist then create it.
      // To improve performance it is best to create the popup when it is first needed
      // and not when the editor is initialized.
      if (!$popup) $popup = initPopup();

      // Set the editor toolbar as the popup's container.
      editor.popups.setContainer('customPlugin.popup', editor.$tb);

      // This will trigger the refresh event assigned to the popup.
      // editor.popups.refresh('customPlugin.popup');

      // This custom popup is opened by pressing a button from the editor's toolbar.
      // Get the button's object in order to place the popup relative to it.
      var $btn = editor.$tb.find('.fr-command[data-cmd="myButton"]');

      // Set the popup's position.
      var left = $btn.offset().left + $btn.outerWidth() / 2;
      var top = $btn.offset().top + (editor.opts.toolbarBottom ? 10 : $btn.outerHeight() - 10);

      // Show the custom popup.
      // The button's outerHeight is required in case the popup needs to be displayed above it.
      editor.popups.show('customPlugin.popup', left, top, $btn.outerHeight());
    }

    // Hide the custom popup.
    function hidePopup () {
      editor.popups.hide('customPlugin.popup');
    }

    // Methods visible outside the plugin.
    return {
      showPopup: showPopup,
      hidePopup: hidePopup
    }
  }

  // Define an icon and command for the button that opens the custom popup.
  FroalaEditor.DefineIcon('buttonIcon', { NAME: 'star', SVG_KEY: 'star'})
  FroalaEditor.RegisterCommand('myButton', {
    title: 'Show Popup',
    icon: 'buttonIcon',
    undo: false,
    focus: false,
    plugin: 'customPlugin',
    callback: function () {
      this.customPlugin.showPopup();
    }
  });

  // Define custom popup close button icon and command.
  FroalaEditor.DefineIcon('popupClose', { NAME: 'times', SVG_KEY: 'back' });
  FroalaEditor.RegisterCommand('popupClose', {
    title: 'Close',
    undo: false,
    focus: false,
    callback: function () {
      this.customPlugin.hidePopup();
    }
  });

  // Define custom popup 1.
  FroalaEditor.DefineIcon('popupButton1', { NAME: 'bell-o', SVG_KEY: 'help' });
  FroalaEditor.RegisterCommand('popupButton1', {
    title: 'Button 1',
    undo: false,
    focus: false,
    callback: function () {
      alert("popupButton1 was pressed");
    }
  });

  // Define custom popup 2.
  FroalaEditor.DefineIcon('popupButton2', { NAME: 'bullhorn', SVG_KEY: 'cogs' });
  FroalaEditor.RegisterCommand('popupButton2', {
    title: 'Button 2',
    undo: false,
    focus: false,
    callback: function () {
      alert("popupButton2");
    }
  });

  // Initialize the editor.
  new FroalaEditor('#froala-editor', {
    toolbarButtons: ['bold', 'italic', '|', 'myButton'],
    pluginsEnabled: ['customPlugin']
  })
</script>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_2087522022" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1925951864" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1038298565" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>