How to show a bottom bar on button onClick with jQuery Mobile? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

---

Want to improve this question? Add details and clarify the problem by editing this post.

Closed 9 years ago.

Improve this question

I'm working on a mobile app usng jQuery Mobile. I have created a compose mail same like Gmail. On cancel button click, I need a bottom bar to appear with options like save, save as Draft, and Discard.

What I have tried:

<div data-role="header" data-position="fixed" data-theme="b">
    <button class="ui-btn ui-btn-inline" data-mini="true">Send</button>
    <h1>Compose</h1>
    <button class="ui-btn ui-btn-inline" data-mini="true">Cancel</button>
</div>
<div>
    <input name="To" id="To" value="" type="text" data-mini="true" placeholder="To" />
</div>
<div>
    <input name="Subject" id="Subject" value="" type="text" data-mini="true" placeholder="Subject" />
</div>
<div>
    <textarea cols="40" rows="22"  name="textarea-2" id="textarea-2" placeholder="Compose Mail "></textarea>
</div>

Answer 1

Add a hidden footer:

<div id="footer" data-role="footer" data-position="fixed" data-theme="b" hidden="">
    <button class="ui-btn ui-btn-inline" data-mini="true">Save</button>
    <button class="ui-btn ui-btn-inline" data-mini="true">Save as</button>
    <button class="ui-btn ui-btn-inline" data-mini="true">Discard</button>
</div>

And show it when needed:

$("#footer").show();