framework7.angular
Version:
Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs
46 lines (45 loc) • 2.1 kB
text/jade
.page(data-page="modals")
.navbar
.navbar-inner
.left
a(href="index.html").back.link.icon-only
i.icon.icon-back
.center Modals
.right
a(href="#").link.open-panel.icon-only
i.icon.icon-bars
.page-content
.content-block
p There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:
p.row
span.col-33
a.button.button-raised(href="#").demo-alert Alert
span.col-33
a.button.button-raised(href="#").demo-confirm Confirm
span.col-33
a.button.button-raised(href="#").demo-prompt Prompt
p.row
span.col-50
a.button.button-raised(href="#").demo-login Login Modal
span.col-50
a.button.button-raised(href="#").demo-password Password
p.row
span.col-50
a.button.button-raised(href="#").demo-actions Action Sheet
span.col-50
a.button.button-raised(href="#", data-popup=".demo-popup").open-popup Popup
.content-block-title Action Sheet To Popover
.content-block
p Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
p
a.button.button-raised(href="#").demo-actions-popover Action/Popover
.content-block-title Picker Modal
.content-block
p Such overlay type is similar to <a href="picker.html">Picker's</a> overlay, but also allows to create custom picker overlays
p
a.button.button-raised(href="#").demo-picker-modal Picker Modal With Custom HTML
.content-block-title Modals Stack
.content-block
p This feature doesn't allow to open multiple modals at the same time, and will automatically open next modal when you close the current one. Such behavior is similar to browser native alerts:
p
a.button.button-raised(href="#").demo-modals-stack Open Multiple Alerts