Apps Menu

Modal Targeting

Modals can be trigged in various fashions. All are triggered but adding one of the following styles to a component:

Or, the more advance way is to add the following to a button/link:
data-toggle="modal" data-target="#targetModal"

.trigger-dialog

This is the most basic form of triggering a dialog

.trigger-put, .trigger-post, .trigger-delete

These will pass the query string specified in in the href to the end point via the require REQUEST_METHOD and will use the title attribute to display a modal dialog/alert to confirm the action.

#targetModal

This is the most generic and produces a much nicer way to render forms. As such it requires a slightly set up. It uss bootstrap's built in modal system, but the data-target must be #targetModal as this has the triggers associaed with it.

Examples:

Standard Example

<a href="/examples/targetModal.html" data-toggle="modal" data-target="#targetModal" title="This is the title">Click me</a>
Click me

Form Example

Form Example
<a href="/examples/targetModal-form.html" data-toggle="modal" data-target="#targetModal" class="btn btn-default">Form Example</a>
The you have the form within the code and add the class button-submit to the primary button
<form>
    <button class="button-submit">Action Button</button>
</form>