Modals
The modern modal pattern is the shared/ziom_modal partial driven by the
ziom-modal Stimulus controller — not Turbo Frames or a third-party
library. Any element with data-ziom-modal-open="<modal_id>" opens the
matching modal; data-action="click->ziom-modal#close" closes it.
Older areas of the app still use Bootstrap 5 modals
(
data-bs-toggle="modal"), often with a ziom-modal-override
class for Ziom styling. New work should prefer the Ziom modal partial below.
Live Example
Click the button to open a real Ziom modal rendered on this page.
Usage
Render the partial anywhere on the page and add a trigger. Required locals:
modal_id and title. Optional: size
(:sm, :md, :lg, :xl) and
show_close.
ERB
<button type="button" class="ziom-btn ziom-btn-primary" data-ziom-modal-open="new-lead">
New Lead
</button>
<%= render "shared/ziom_modal", modal_id: "new-lead", title: "Create New Lead", size: :md do %>
<div class="ziom-modal-body">…form fields…</div>
<div class="ziom-modal-footer">
<button type="button" class="ziom-btn ziom-btn-secondary" data-action="click->ziom-modal#close">Cancel</button>
<button type="submit" class="ziom-btn ziom-btn-primary">Save</button>
</div>
<% end %>