jQueryのダイアログの使い方

2年 ago
海斗, 葵
1 minute

jQuery UIではdialogプラグインを提供しており、カスタマイズ可能なモーダルダイアログを作成できます。このプラグインを使用して、警告ボックス、確認ボックス、プロンプトボックスなどのカスタムダイアログを作成できます。

jQueryダイアログの基本的な手順は以下のとおりです。

  1. jQueryおよびjQuery UIのライブラリファイルを読み込む：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  1. ダイアログのコンテナとしてHTML要素を作成する：
<div id="dialog"></div>
  1. JavaScriptコードを使ってダイアログを初期化します。
$(function() {
$("#dialog").dialog();
});
  1. いくつかのオプションを渡すことで、ダイアログの外観や動作をカスタマイズできます。たとえば、ダイアログのタイトル、ボタン、幅、高さなどを設定できます。
$(function() {
$("#dialog").dialog({
title: "对话框标题",
buttons: {
"确认": function() {
// 点击确认按钮时执行的操作
},
"取消": function() {
// 点击取消按钮时执行的操作
$(this).dialog("close");
}
},
width: 400,
height: 200
});
});
  1. ダイアログは、JavaScriptコードで開いたり閉じたりできます。
$(function() {
$("#openDialogButton").click(function() {
$("#dialog").dialog("open");
});
$("#closeDialogButton").click(function() {
$("#dialog").dialog("close");
});
});

上記コード内の#openDialogButtonと#closeDialogButtonは、それぞれダイアログを開いて閉じるボタンです。

上の手順に従うと、jQuery ダイアログを作成して使用できます。

bannerAds