Bootstrap Modals and Dialogs

OpenEMR Development
1

As we move closer to being bootstrap centered, now may be a good time to decide how, why, when or where modals should be used, if at all. Also a standard modal layout should be decided.

Browser windows have several advantages over B.S modals for dialog’s with one being the ability for user to move dialog with a downside that sometimes user forgets to close (use to be could force modal behavior of window), however, one could argue modals are easier to deal with data and element manipulations.

Hopefully others will comment on preferences.

I’ve started the process to convert our existing window dialog to a bootstrap modal with some options while maintaining legacy support. Comments and suggestions are welcomed. PR is here:

2

My vote is definitely to move towards a standard bootstrap modal. I am pretty sure both @robert.down and @zbig01 have examples of bootstrap modal use in the respective PR’s on github. Hopefully they can point us to them.
-brady

3

My vote is modals only. The modal can still be dragged around and it’s far less complex to manage a modal and its content. If the content should be persistent, it’s a bad choice for a modal anyway and should be given its own page.

4

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>
5

Yep nice, I’m also pretty sure they nicely handle iframes or really most any container, especially if the advice of placing the modal outside the pages container is followed.

6

A day will come where we never again have to worry about iframes… one day

7

Yes Robert let’s get on that :slight_smile: