Login with:


Not a member? Sign Up

Forgot Password?

Signup with:


Already have an account? Log in

MDW WordPress Tutorial Modal

WordPress Popup

Written by Michał Krawczyk ,

Former component name: Modal

Popups (former Modals) are just dialog prompts. You can use them in a various of purposes. They are very universal, hence useful.

To change the title, button style, size or any other factor of the popup, use the parameters from the table below. Remember to put the parameters inside the modal bracket, separated only with space (no commas or semicolons). Then use the "equals" mark and insert the proper operator in the quotation marks (like in the examples below).

[modal title="What is material design?" open_button_type="info" open_button="More info" close_button="Close"]

Material Design (codenamed Quantum Paper) is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.



[modal title="" open_button_type="success" open_button_outline="true" open_button="photo" close_button_rounded="true" close_button="default" size="medium"][img alt="Alternative text"]https://mdbootstrap.com/img/Others/Tutorials_WP/koala.jpg[/img]This is Robert. Robert is a koala. Robert likes his life, be like Robert.[/modal]

[modal title="See us in action" open_button_type="primary" open_button_rounded="true" close_button"close" open_button="Our last video" size="big"][media dimension="4by3"]https://www.youtube.com/embed/8SbUC-UaAxE[/media][/modal]

To use optional parameters, append the option name to the shortcode.

Name Type Default Description
title string Modal dialog Changes title for the modal dialog
size string null Changes size of modal dialog. You can use small or big instead
open_button string Open dialog Changes text value for open button
open_button_type string primary Changes color for open button. You can use default, secondary, success, info, code instead
open_button_rounded string false Setting to true makes button rounded
open_button_outline string false Setting to true changes button style to outline
close_button string ok Changes text value for close button
close_button_type string primary Changes color for close button. You can use default, secondary, success, info, code instead
close_button_rounded string false Setting to true makes button rounded
close_button_outline string false Setting to true changes button style to outline


It is recommended to paste the copied code into the "Text" area. Otherwise, the shortcode may not work properly. If you copy the code into "Visual" area, it may contain additional operators, which might break the modal.

Do you want to share?

About author

User avatar

Michał Krawczyk

Digital Marketing Analyst at MDW with a strong Research background, student of Interfaculty Individual Studies in the Humanities at the Jagiellonian University

Leave a reply

Card image cap

Stay up to date

Subscribe to our newsletter

Rapid change in the world of web development is its inseparable quality. New updates and features are being constantly released, almost every week. Don't forget to be up to date.