jsファイル側にメッセージを記載してダイアログ表示する方法は下記のソースです。
jsファイル(dialog.js)は、HTMLファイル(SampleJDialog.html)を格納したフォルダに
jsフォルダを作成して格納します。
dialog.js
$(function() {
$('#btn').on("click", function() {
$("#message").html("メッセージを表示");
$("#dlg").dialog({
modal:true,
title:"ダイアログのタイトル",
buttons: {"OK": function() {$(this).dialog("close");}}
});
});
});
SampleJDialog.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css">
<title>ダイアログの表示</title>
</head>
<body>
<h1>ダイアログの表示</h1>
<!-- JSファイルの定義 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<!-- ダイアログの表示 -->
<div id="dlg" style="display:none;">
<p id="message"></p>
</div>
<input type="button" id="btn" value="表示">
</body>
</html>