Show (Open) Bootstrap Modal Popup on Anchor Link Click using jQuery

Last Reply one year ago By dharmendr

Posted one year ago

my modal pop up id is: my-modal

i want to open it on the click event of anchor tag...how i should position modal pop up id in href property of anchor tag..?

<a class="Update" href="javascript:; #my-modal"> <i class="ace-icon fa fa-pencil-square-o"></i> |</a>

 

Posted one year ago

Hi Shud,

Refer below code.

HTML

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
    $(function () {
        $("a[class='Update']").click(function () {
            $("#MyPopup").modal("show");
            return false;
        });
    });
</script>
<center>
    <a class="Update" href=""><i class="ace-icon fa fa-pencil-square-o"></i>|</a>
</center>
<div id="MyPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>
                <h4 class="modal-title">
                    Greetings
                </h4>
            </div>
            <div class="modal-body">
                Welcome to ASPSnippets.com
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" data-dismiss="modal" />
            </div>
        </div>
    </div>
</div>

Demo