Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script></head>
</head>
<body>
<!-- Page -->
<div data-role="page">
   <div data-role="header">
      <h1>Header</h1>
   </div>
 
   <div data-role="content">
      <p>The links below will be presented as a modal dialog:</p>
 
      <ul data-role="listview" data-inset="true">
         <li><a href="#dialog" data-rel="dialog" data-transition="slide">slide</a></li>
         <li><a href="#dialog" data-rel="dialog" data-transition="slideup">slideup</a></li>
         <li><a href="#dialog" data-rel="dialog" data-transition="slidedown">slidedown</a></li>
         <li><a href="#dialog" data-rel="dialog" data-transition="pop">pop</a></li>
         <li><a href="#dialog" data-rel="dialog" data-transition="fade">fade</a></li>
         <li><a href="#dialog" data-rel="dialog" data-transition="flip">flip*</a></li>
      </ul>
   </div>
 
   <div data-role="footer">
      <h4>Footer</h4>
   </div>
 
</div>
 
<!-- Page 2 -->
<div data-role="page" id="dialog">
   <div data-role="header">
      <h1>Modal Dialog Page</h1>
   </div>
 
   <div data-role="content">
      <p>This is modal dialog.</p>
   </div>
</div>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
chenyuyipro
0viewers