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">×</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]
[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">×</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]
good
ReplyDelete