Modals/Dialogs without Enchanceable Content/jQuery UI

[DeletedUser]

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:

1. 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.
2. z-index of at least 11 needed on #modal_overlay div to completely cover the course sidebar on the left.
3. The .middle-xs .center-xs classes and display:flex are to get the modal to show up in the center of the page.
4. 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.
5.  The .box-shadow class will give you a box shadow on your divs (useful since the editor will strip out the box-shadow attributes)
6. 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)
7. 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.
8. 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.
9. 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

modal_code.html.zip

[cadatko]

Thanks so much for this! I've tried a pop-up in Canvas and it doesn't render well in the mobile app. Hopefully this will be a better solution. I can't wait to try this out!

[nicole_ronan]

Just tried this out and it works a treat. Thanks Ashley!

[Shar]

Hi KATIE DATKO,

Right now (May 13, 2019), the above modal text link only shows as regular text in the Canvas Android App.

So I'm probably going to go back to hiding my modals in mobile screens, by throwing the whole modal code + link in a div.

<div id="HideMobile" class="visible-desktop" style="display: none;">

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

</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[elena18]

Hi I used your code and it works perfectly. Is any possibility to make the modal window resizable?

[Jason_Snellings]

@elena18 

Did you have to do anything beyond pasting in the code to make this work? I tried pasting the exact text above and it does not generate the overlay right, it instead just puts it next to the text I am clicking. I cannot figure out what else I would need to do in order to get it to popout like in the video.

[elena18]

Hi @Jason_Snellings I actually do not remember, but I paste here the code I used (there's an image to click on, and the modal windows shows a Google spreadsheet).

<a class="element_toggler" title="Master Sorter Table" aria-controls="modal_demo" aria-label="Master Sorter Table">
	<img class="icon-button" src="https://canvas.imma-network.org/courses/5/files/230/preview" alt="Master Sorter Table" width="120" height="120" data-api-endpoint="https://canvas.imma-network.org/api/v1/courses/5/files/230" data-api-returntype="File" />
</a>
<div id="modal_demo" style="display: none;">
	<div id="modal_overlay" class="ui-widget-overlay container middle-xs center-xs modal-imma" style="text-align: left; display: flex; position: fixed; z-index: 11; left: 0px; top: 40px; width: 100%; height: 100%;">
		<div id="modal" class="ui-corner-all box-shadow modal-dialog-imma" style="background-color: #e0e0e0; padding: 10px; position: absolute; width: 100vw; max-width: 100%;">
			<div id="modal_header" style="border-bottom: 1px solid #C7CDD1;">
				<h2>Master Sorter Table - update UTC 22:00</h2>
			</div>
			<div id="modal_content">
				<p>Update on Feb 25 - UTC 22.00</p>
				<iframe style="width: 100%; height: 400px;" src="https://docs.google.com/spreadsheets/xxxx"></iframe>
			</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>

[elena18]

@DeletedUser by the way, is it possible to make the modal window resizable? Thanks

[DisenadorDEDSe]

hello, i'm trying to modify and put the modal, on top of the page ( top vertical, center horizontal), how can i change that? Thanks!