alert-with-persistent-close.html

<div id="lms-splash-alert-container"></div>
<script>
require(['jquery'], function($) {
	
	function showAlert(id, $container, noticeTitle, bodyHTML) {
		if(localStorage.getItem(id)) {
			//the notice has been hidden in this browser
			return;
		}
		
		//create the notice container
		var $notice = $('<div>', {
			'class': 'wdn_notice',
			'role': 'alert'
		});

		//create the close button
		var $closeContainer = $('<div>', {
			'class': 'close'
		});

		var $closeButton = $('<a>', {
			'tabindex': 0,
			'role': 'button',
			'style': 'cursor: pointer;'
		}).text('Close this notice');

		$closeButton.on('click', function () {
			//prevent this notice from showing in the future
			localStorage.setItem(id, true);
		});
		
		$closeButton.on('keypress', function(e) {
			if (e.keyCode === 0 || e.keyCode === 32 || e.keyCode === 13) {
				//Pressing space or enter on a button should close it too (rather than just enter)
				e.preventDefault();
				$closeButton.click();
			}
		});

		$closeContainer.append($closeButton);

		//create the message
		var $message = $('<div>', {
			'class': 'message'
		});

		$message.append($('<p>', {
			'class': 'title'
		}).text(noticeTitle));
		$message.append(bodyHTML);

		//Attach the contents to the notice
		$notice.append($closeContainer);
		$notice.append($message);

		//Attach the whole thing to the container
		$container.append($notice);
	}

	WDN.initializePlugin('notice', showAlert(
		'hide-2017-welcome-notice', //id of alert
		$('#lms-splash-alert-container'), //container jquery object
		'Welcome Back.', //title
		//body
		$('<p>').html("We've spruced the place up a bit. Hope you like it. My.unl.edu is now your jumping-off point for online services for Nebraska students; you'll find similar links throughout unl.edu. As always, comments are welcome ... just use the handy chat/email widget at the bottom of the page.")
	));
});
</script>