bootstrap modal popup example

bootstrap modal popup example on load.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<li style="font-style:bold" title="rate on skill" class="skill_rating"><a data-toggle="modal" title="Add this item" class="open-AddBookDialog" href="#addBookDialog" data-id='5'><i class="fa fa-anchor" aria-hidden="true"></i> Click me</a></li>

<!-- Modal -->

<div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="addBookDialog"><div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Search</h4>    
            </div>
            <div class="modal-body">
                <div class="form-group">
                <input type="text" name="bookId" id="bookId" value=""/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"><span>Search</span></button>
            </div>
        </div>
    </div>

JavaScript

$('body').on('click', '.open-AddBookDialog', function() {
        var myBookId = $(this).data('id');
        $("#addBookDialog #bookId").val( myBookId );
        alert(myBookId);
    });