Last modified by M. Dara Duman - 3 years ago
1 min read

How to create Twitter’s Bootstrap Modals using WP App Studio

Modals are easy to use dialog prompts which can be used in a variety of use cases. WP App Studio allows creating a Twitter's Bootstrap modals with single function tag in view layouts. You can use modals to collect data from users in various types of views without cluttering your view layout HTML with special markup.

To be able create the modal, we use the following function tag:

!#bs_modal['Triggering Button Title', 'Triggering Button Class', 'Modal Header Content', 'Modal Body Content', 'Modal Footer Content']#

  • Triggering Button Title: the title of the button which will be used to trigger modal. e.g. Sign up, Attend, Register etc.

  • Triggering Button Class: the CSS class(es) of the triggering button. e.g. "btn btn-lg btn-primary" creates large size, blue button.

  • Modal Header Content: modal's header content can be anything. if you have more than a line, use a concatenate attribute type(under hidden functions) and simply use an attribute tag

  • Modal Body Content: modal's body content can be anything. e.g. a shortcode of a submit form or view or an attribute tag

  • Modal Footer Content: modal's footer content can be anything. e.g. an attribute tag to notify event attendees.

In WP Easy Events Professional WordPress plugin, we used the following:

!#bs-modal['RSVP', 'btn btn-info btn-lg', 'Attend - !#title#', '!#shortcode[event_attendee set="rel::event_attendee::is::!#entity_id#"]#', 'Every child must have an adult guardian.']#

In this example, I'm going to create a modal to collect attendee information for an event. !#shortcode[event_attendee set="rel::event_attendee::is::!#entity_id#"]# displays the attendee registration submit form and connects it the specific event using !#entity_id# tag through "event_attendee" relationship between events and attendees.

Was this information helpful?