onclick anchor tag open url in bootstrap model

for example let us thisnk your anchor tag is
[source language="html"]
<a href="https://google.co.in/">Google</a>
[/source]
Now you need to open that link in bootstrap model,for this just follow this procedure

write your anchor tag as
make sure you already included jquery js file and bootstrap css file in this page

HTML COde:
[source language="html"]
<span name='https://google.co.in/' class='mapview_link'>Google</span>

<div class="modal fade in" id="RtPopupModal" role="dialog">
<div class="modal-dialog" id="RtPopupType">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" id="rtpopuptitle"></h4>
</div>
<div class="modal-body" id="viewrtdata">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</div>

<div class="modal-footer">
<!--<button type="button" class="btn btn-default" onClick="saveRCA()" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
</div>

</div>

</div>
</div>
[/source]
Javascript:
[source language="javascript"]
$(document).ready(function(){
$(".mapview_link").click(function(){
var url= $(this).attr("name");
$("#rtpopuptitle").html("Map view");
$('#RtPopupModal').modal('toggle');
$("#viewrtdata").addClass('no-padding');
$("#viewrtdata").css('height','75vh');
$('#RtPopupType').addClass('modal-lg');
$("#viewrtdata").html('<iframe src="'+url+'" scrolling="no" frameBorder="0" width="100%" height="100%">/iframe>');
});
});
[/source]
css:
[source language="css"]
.mapview_link{
cursor: pointer;
color: blue;
}
[/source]

Comments

Post a Comment

Popular posts from this blog

Simple Mail Sending Contact Form using PHP and Jquery

Codeigniter with Admin LTE