JQuery Display Multiple Dialogs Example

How to display multiple JQuery dialogs on the same page

jquery multiple dialogs
I recently started adding pop up help messages to my forms as online help text. These are handy for explaining to the user why the input is required, what is expected in the field and how the input should be formatted. But there are plenty of other areas where a dialog pop up could be useful. I use JQuery dialog because it is super simple and allows for an easy way to hide help text until it is needed.

Here is an simple example page with 3 simple paragraphs each with a separate help dialog popup. By giving each dialog a unique ID we can include as many dialog on the page as we need. In our example each dialog has the same style but you could have individual styles for each dialog.

You will need to include the JQuery libraries on your page.

I’ve also included a reference to simple-line-icons.css for the help icon.

<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#" class="no-js">
<head>
<title>Multiple JQuery Dialogs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>


<script>
	//style all the dialogue
	$( function() {
		$(".dialog_help").dialog({
			modal: true,
			autoOpen: false,
			width: 500,
			height: 300,
			dialogClass: 'ui-dialog-osx'
		});
	});
	
	//opens the appropriate dialog
	$( function() {
		$(".opener").click(function () {
			//takes the ID of appropriate dialogue
			var id = $(this).data('id');
		   //open dialogue
			$(id).dialog("open");
		});
	});
</script>

	<p>This is the first paragraph. <em class='icon-question opener' data-id='#dialog_1' style='cursor: pointer;'> Help 1</em></p>
	<div class='dialog_help' id='dialog_1' title='Dialog 1 title'>
		<p>Dialog Help Content One.</p>
	</div>
	<p>This is the second paragraph. <em class='icon-question opener' data-id='#dialog_2' style='cursor: pointer;'> Help 2</em></p>
	<div class='dialog_help' id='dialog_2' title='Dialog 2 Title'>
		<p>Dialog Help Content Two.</p>
	</div>
	<p>This is the third paragraph. <em class='icon-question opener' data-id='#dialog_3' style='cursor: pointer;'> Help 3</em></p>
	<div class='dialog_help' id='dialog_3' title='Dialog 3 Title'>
		<p>Dialog Help Content Three.</p>
	</div>


    </body>
</html>
  

Copy Code


Click Here for a Working Example

Example output

JQuery Display Multiple Dialogs

References

simple line icons
JQuery
JQuery Dialog

3 Replies to “JQuery Display Multiple Dialogs Example”

  1. Hello Brian,

    Thank you for this perfect solution. I know just enough about jQuery to recognize what might be needed, but still be totally clueless as to what needs to be done. I’ve never really made it beyond the conceptual steps for identifying a need and then coding a solution. Your multiple dialog jQuery breakdown was just what my brain was thinking of.

    Again, thank you!

Leave a Reply

I appreciate and welcome your comments. Please keep in mind that comments are moderated according to my comment policy.
Your email address will not be published. Required fields are marked *