I like the bootstrap modals for their ease of use and for easily being responsive. I have several examples of bootstrap modals in openEMR that I have experimented with. I am in the process of refining a help modal and will post a PR soon. However to see previous versions go to openemr-bootstarp-flatstyle
Fees > Posting and click on the ?
Procedures > Patient Results
An improved version can be seen at openemr-stripe-credit-card
Fees > Stripe Credit Card Help
The code is very simple, just add this modal div and jquery script after the end of the container div , adjust the src and call it form any suitable element in the DOM with id=“help-href”. It will bring any refrenced page into the modal as an iframe.
<div class="row">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content oe-modal-content">
<div class="modal-header clearfix"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" style="color:#000000; font-size:1.5em;">×</span></button></div>
<div class="modal-body">
<iframe src="" id="targetiframe" style="height:75%; width:100%; overflow-x: hidden; border:none" allowtransparency="true"></iframe>
</div>
<div class="modal-footer" style="margin-top:0px;">
<button class="btn btn-link btn-cancel pull-right" data-dismiss="modal" type="button"><?php echo xlt('close'); ?></button>
</div>
</div>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
$('#help-href').click (function(){
document.getElementById('targetiframe').src ='../../../interface/forms/fee_sheet/fee_sheet_help.php';
})
});
</script>