I've created a small plugin which adds a button to the TinyMCE toolbar. When clicked, it opens a popup window via editor.windowManager.open(). That popup can be closed by (1) clicking the "Cancel" or "OK" buttons, or (2) pressing the esc key.

I'm trying to figure out how I can also close my plugin's popup by clicking away from it (e.g., if I click the TinyMCE overlay outside the popup itself). WP's Insert/edit link triggers a popup with that capability but from what I can tell that plugin uses a custom dialog box and I was hoping there might be a TinyMCE API method/property that can enable this, but the documentation is pretty terse.

Here is my plugin, for reference:

(function() {
  tinymce.PluginManager.add('custom_plugin', function(editor, url) {
    editor.addButton('custom_plugin', {
      text: 'Plugin',
      icon: false,
      onClick: function() {
          title: 'Custom Plugin',
          body: [
              type: 'textbox',
              name: 'theText',
              label: 'Text',
              value: '',
              minWidth: 800
          onsubmit: function(e) {

1 Answer 1


You asked the question a long ago but I was looking for something similar and found a solution.

Enqueue an admin side script on post edit screens(where we have tinyMCE). Then use the code below:

(function($) {
    'use strict';

    $(document).ready(function() {
        $(document).on( 'click', '#mce-modal-block', function() {


This way you can close any popup comes from tinyMCE by clicking outside of it.

  • Cheers, will give this a try on my next project!
    – cfx
    Apr 30, 2015 at 23:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.