Popup textareas mobile

by manoj

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popup dynamic options</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>

<body>
<div data-role="page" id="page1" data-theme="b">
  <div data-role="header" data-theme="b">
    <h1>Popup textarea</h1>
  </div>

  <div data-role="content">
    <p class="ui-bar ui-bar-b">
      <a href="#pop1" data-rel="popup" id="btn1" data-inline="true">use popup open</a>
    </p>
  </div>

  <div data-role="popup" id="pop1" data-position-to="window">
      <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
      <div data-role="header" data-theme="b"><h1>Popup</h1></div>
    <p class="ui-bar ui-bar-f ui-corner-all">
      <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcSW72SM-uLGp9jdLNa-u4Od3YZr8o4jmLJnPEzhnN-GAQYYxiHI" width="140" />
    </p>
      <p class="ui-bar ui-bar-e">
      <textarea placeholder="let me grow and close the popup"></textarea>
      </p>
  </div>

  </div>

</div>

</body>
</html>

CSS

p.ui-bar.ui-bar-b { margin: 1em -15px; }
.ui-bar-f { background: #fff; }