Simple modal window

Consider a simple example of connecting a modal window. For example we need to add a modal window in the BB code myimg.

Assume that the output of this code has the BB HTML format:

<img src="Source" title="Title" />

And the BB code looks like this:

[img title=Title]source[/img]

In our modal window, we need to be able to fill two fields: "file path" and "Title" configuration will look like this:

<script>
$(document).ready(function() {
 var wbbOpt = {
  buttons: "myimg",
  allButtons: {
    myimg: {
      title: "Inserting a picture with the parameters",
      buttonText: "myimg",
      modal: { //Description of modal window
        title: "Modal title",
        width: "600px",
        tabs: [
          {
            input: [ //List of form fields
              {param: "SRC",title:"Enter image URL",validation: '^http(s)?://.*?\.(jpg|png|gif|jpeg)$'},
              {param: "TITLE",title:"Enter image title",type:"div"}
            ]
          }
        ],
        onLoad: function() {
          //Callback function that will be called after the display of a modal window
        },
        onSubmit: function() {
          //Callback function that will be called by pressing the "Save"
          //If function return false, it means sending data WysiBB not be made
        }
      },
      transform: {
        '<img src="{SRC}" title="{TITLE}" />':'[img title={TITLE}]{SRC}[/img]'
      }
    }
  }
}
 $("#editor").wysibb(wbbOpt);
});
</script>
.....
<textarea id="editor"></textaera>

Attribute type in the input "TITLE", means the type of the input fields. This field is similar textarea with html formatting.

The result of this configuration is: