Navigation Menu

Data Attributes Generator

Data attributes generator

Use the form below to generate the data attributes that you can add to any element, which will trigger the modal as if you have called ModalManager.instance.addModal()

Note: Some attributes, specially those which have enabled properties like header and footer, will not be included in generated options code, if enabled is false. Also, if the parameter value is equal to default value, it will be ignored as well. This is to keep options object minimal!
Caution: Since the data attributes are html attributes, and their values are quoted with double quotes ("). If you generate any attribute value, manually or dynamically, you should make sure any " inside is encoded to " to safely use as attribute value.

Any html tag name can be used. By default it is h2. Leave empty if you dont want to change the tag name.

bodyContentFunction is a global function already added for demo purpose. So that you can see how it works.
Arguments can be anything. For data attributes, this will always be string type value. And, for this form this will always be a JSON encoded string!
Can be either html or json. If the value is none of those or left empty, it will be treated as html content.
Note: html content loaded over ajax, will have any script, link or style tags preserved. So, before you load any ajax content from domains other than your own, you should be very careful and consider any security risk.
Note: content data type json, requires a transformer method, that takes the JSON object and returns the html markup for the modal. For this form we have simple transformer method jsonTransformer that just spits out the JSON data as JSON string again!
Normally the request header can be object or JSON string that can be parsed to an object. For attributes though, it can only be base64 encoded json string.
Though, the request data can be object or JSON string that can be parsed to an object, in here like headers it can only be base64 encoded json string.
Like in iframe or image type, you may want to set proper modal heights and widths, along with an aspect ratio. So that the video can display nicely.

How about trying with these settings for videos? -
  1. Set width to : 900px
  2. Set max. width to : 90vw
  3. Set Aspect ratio to: 1.7777777 (16/9)
And, for shorts -
  1. Set height to : 800px
  2. Set max. height to : 90vh
  3. Set Aspect ratio to: 0.5625 (9/16)


Of-course, you can also set a css class for the video modal, and further adjust styling as per your needs.
Note: When using iframe embed code, you might want to adjust widths in Modal Widths section or heights in Modal Heights along with aspectRatio in Other Params section. Also, if you need to remove padding from body, you can simply check the "No padding on body" checkbox.
You can load modal content from a <template> element, by passing the element's ID in body.templateId. if the template is not found, you will get an error. For this form's demo, we have a template here with id content-template-1234

Try setting any invalid template id, and see what happens!
Like in iframe or youtube-video type, you may want to set proper modal heights and widths, along with an aspect ratio, so that image inside modal can be displayed nicely. For example, with images having aspect ratio > 1, you may only set width, max width and aspect ratio, while leaving heights in auto, so that no matter the screen size the image will display inside the screen keeping full aspect ratio.
If this field value is not empty, and the modal system can't find a <template> element with same id, it will show an error!

Note: Unit left empty will default to px
Note: Unit left empty will default to px

Note: Unit left empty will default to px
Note: Unit left empty will default to px

If left empty, the character X is used as content.

Any valid css color format supported. Need to include alpha or transparency info along with color to give the back drop a semi transparent feel. For example: rgba(0,0,0,0.5)

Normally this ID is auto generated, but just in case you need, you can assign your own ID here. Do note though, modal system will not allow multiple modals with same id!
If you enter any number > 0, the modal will delay showing up by that number of milliseconds.
Set a value > 0, to apply a fade in/out effect as modal is displayed/removed
While this can be set for any content, but it is more effective on image, youtube-video and iframe type contents. Where you would want to force an aspect ratio, so that image, video or embedded content renders properly.
This is the button markup of Open Modal Via Attrs button after applying the data attributes -