Using the Canvas LMS style guide to create a Highlights/Alerts on our beta instance. I have it appears as I wanted, however, I have encountered an issue with closing the Alert. I have the class "Button Button--icon-action close_link" in the code, however, the close_link does not appear to be working.
Is the close_link what I need to use for closing? Is there any more documentation beyond what the Canvas LMS to further explain how these work within Canvas?
The fade out can be added.
You might know this, others might not...
It should be noted that the example on the /styleguide shows the alert wrapped by a <p>paragraph</p> tag. The paragraph tag is a block level element and cannot contain another block level element without force closing it. Use of the <p> would leave orphaned elements in the DOM as <p></p> and you would not be able to remove them, or find yourself with potentially frustrating results.
Here's what that looks like in the DOM if using the provided example.
This is obvious even if you Inspect Elements of the styleguide as well.
Therefore, in my example, I'm excluding the <p> wrapping the alert <div> and added a custom class to the div, to close the alert. The on(click) handler looks for the closest custom-alert class and removes it from the DOM.
var bAlert =
`<div class="ic-flash-info custom-alert">
<div class="ic-flash__icon" aria-hidden="true">
<i class="icon-info"></i>
</div>
Info: Sample flash notice style.
<button type="button" class="Button Button--icon-action close_link">
<i class="icon-x" aria-hidden="true"></i>
<span class="screenreader-only">Close</span>
</button>
</div>`;
$('body').prepend(bAlert);
$('.close_link').on('click', function(e) {
$(this).closest('.custom-alert').remove();
});I would also suggest looking into doing this without jQuery if you're going to depend on this functionality long term.
