Reset modal | Twitter Bootstrap

by Sherbrow

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>
        <!-- Demo only -->
            <input type="text" value="One fine body…" onkeydown="$(this).next('span').text($(this).val());"/>
            <span></span>
        </p>
    </div>
    <div class="modal-footer">
        <a href="#" data-dismiss="modal" class="btn">Close</a>
        <a href="#" id="myReset" class="btn btn-primary">Reset</a>
    </div>
</div>

JavaScript

var myBackup = $('#myModal').clone();
    
    // Delegated events because we make a copy, and the copied button does not exist onDomReady
    $('body').on('click','#myReset',function() {
        $('#myModal').modal('hide').remove();
        var myClone = myBackup.clone();
        $('body').append(myClone);
    });