As everyone probably knows, Canvas will slowly be getting rid of enhanceable_content/jQuery UI, including the pop-up dialogs (accordions are already gone). Below is way to get the effect of a dialog, but using the "element_toggler" ability instead. It has more a lot markup involved than just using the enhanceable_content dialog invocation, so it basically necessitates copy/paste and thus may not be so useful for many. But, it also has more capability (including being able to be wider than 300px). Here is a template below that will look fairly similar to the Canvas native dialogs. I've also added an html file of this to the bottom because code is hard to render on these boards.
<a class="element_toggler" aria-controls="modal_demo"
aria-label="Toggle demo modal">Modal/Dialog Trigger Link Title</a>
</p>
<div id="modal_demo" style="display: none;">
<div id="modal_overlay" class="ui-widget-overlay container middle-xs center-xs"
style="text-align: left; display: flex; position: fixed; z-index: 11;
left: 84px; top: 0; width: 100%; height: 100%;">
<div id="modal" class="ui-corner-all box-shadow"
style="background-color: #fff; padding: 10px; position: absolute;
width: 100vw; max-width: 600px;">
<div id="modal_header" style="border-bottom: 1px solid #C7CDD1;">
<h2>Modal Title</h2>
</div>
<div id="modal_content">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Perferendis fugiat libero esse hic, architecto natus provident
excepturi eveniet repellendus cumque accusamus omnis maxime
animi odio sunt modi. Inventore numquam, quisquam.</span></p>
</div>
<div id="modal_footer" class="text-right"
style="border-top: 1px solid #C7CDD1; padding: 10px;">
<a class="element_toggler btn btn-primary ui-corner-all"
role="button" aria-controls="modal_demo"
aria-label="Toggle demo modal"><span class="ui-button-text">Close</span>
</a>
</div>
</div>
</div>
</div>
Some notes:
- There are 2 element_togglers that both affect the visibility of the modal window. Do not put aria-expanded values on these element_togglers. The style guide tells you to do this, and ordinarily you should if you're only using one element_toggler per toggled element. But if you're toggling the element with more than one element_toggler as this does, defining aria-expanded values will make the aria-expanded values for the element_togglers unsynced, leading to you having to click them twice after the initial click for them to work properly. Not defining them at all eliminates this double-click issue.
- z-index of at least 11 needed on #modal_overlay div to completely cover the course sidebar on the left.
- The .middle-xs .center-xs classes and display:flex are to get the modal to show up in the center of the page.
- The .ui-corner-all class gives your elements nice rounded corners on all sides without having to play around with "border border-round border-trbl". You can get rid of it if you don't want rounded corners.
- The .box-shadow class will give you a box shadow on your divs (useful since the editor will strip out the box-shadow attributes)
- The .ui-widget-overlay class will give you the transparent background for the modal (useful since the editor will strip out rgba and opacity values)
- Modify the max-width value on the #modal div to change the width of teh modal. Current code has it to be the width of the viewport/screen or 600px, whichever is less.
- The border values on the #modal_header and #modal_footer divs aren't really needed, just there to make it "look nicer" by separating the modal parts.
- Of course, you can do other things with it. Change the background colors, stick a Youtube video in the modal content, stick an image in there and simulate a lightbox. Mess around with what the buttons say/do. I'm just using it for vocabulary word definitions. 😎 You can probably also simplify this a lot, especially if you aren't interested in getting it to look like the native Canvas dialogs. Here is a simpler version below:
<a class="element_toggler" aria-controls="simple_modal"
aria-label="Toggle simple_modal modal">
Simple Modal Trigger</a>
<div id="simple_modal" style="display: none;">
<div class="ui-widget-overlay container middle-xs center-xs"
style="text-align: left; display: flex; position: fixed; z-index: 11;
left: 84px; top: 0; width: 100%; height: 100%;">
<div id="modal" class="ui-corner-all"
style="background-color: #fff; padding: 10px; position: absolute;
width: 100vw; max-width: 600px;">
Put all your modal content here!
<div class="text-right">
<a class="element_toggler btn btn-primary ui-corner-all"
role="button" aria-controls="simple_modal"
aria-label="Toggle simple_modal modal">
<span class="ui-button-text">Close</span>
</a>
</div>
</div>
</div>
</div>
Disclaimer: Presented without warranty, any claims to longevity, optimum efficiency/semantic adherence, IE and mobile app capability, etc etc
