Jquery Modal (PopUp)

by Silambarasan_sundaram

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.2/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<a href="http://wikipedia.com" id="clicker" role="button" class="btn">Clicker</a>

<div
id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true"></div>

JavaScript

$(function () {
    var $modal = $('#modal');
    $('#clicker').on('click', function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $modal.html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
        $modal.modal({
            show: true
        });
    });

    $modal.on('hide', function () {
        $modal.empty() // Clean up
    });
});