Skip to content
An actionsheet for jquerymobile
CSS JavaScript
Find file
New pull request
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This is an iOS like action sheet

See examples folder

Its not a page its a popup you can use on a page. To do so, first, include actionsheet css and js to the first page of your application. 
Then simply place a HTML Element on the page you like to open the popup.
A link tag for example. Add the data-role "actionsheet" to it. U can place it within
the header as well as within the content. Both should work.
Now add a div directly following this link. Wrap all content you like to show in the popup
into this div. Ready. See the following HTML code for details.

<a data-icon="plus" data-role="actionsheet">Open</a>
      <a data-role="button" href="#">Action 1</a>
      <a data-role="button" href="#">Action 2</a>
      <a data-role="button" href="#">Action 3</a>
      <!-- This close button is optional. The widget also closes if you click or touch outside of the popup -->
      <a data-role="button" data-rel="close" href="#">Cancel</a>

Also you can use html ids to associate toggle and sheet. This way the sheet must not directly follow the toggle.
<a data-role="actionsheet" data-sheet='sheet0'>Open</a>

.... A lot a lot a lot markup in between ....

<div id='sheet0'>
    <h1>This is sheet0 speaking</h1>

If you like to change the in -out Animation you can do that by editing the keyframes in

* Easy to configure CSS3 based keyframe animations
* Popup content can be any HTML
* No js coding needed.
* Nice default look
Something went wrong with that request. Please try again.