イベント・UI:

CSSで整形可能なダイアログを表示

Javascriptのalert()に似た機能として、任意のメッセージをCSSで整形可能な<div>要素として表示する。

String1
ダイアログの識別子を文字列で指定 複数のダイアログスタイルを使い分ける際に有効
String2
表示する文字列(本文)を渡す
String3
表示する文字列(タイトル)を渡す
●必須引数 ●オプション引数(省略可能)

記述例

$dialogue('def', 'ファイルサイズは5MBまでです。')
$dialogue('2', 'ファイルサイズは5MBまでです。', '【ファイルが大きすぎます】')

注意点

表示されるダイアログは、シンプルなタグ構造で<body>直下の最後の要素として挿入される。
具体的な構造は下記を参照のこと。

CSSでは「#klib_dialogue_識別子 {‥}」で自由に整形可能。

動作サンプル

CSSで自由に整形して表示するサンプル。

HTML : 挿入されるダイアログの構造 <div id="klib_dialogue_識別子"> // 引数が2個の場合 <p>本文</p> <button type="button" id="klib_dialogue_btn" onclick="$hideDialogue()">OK</button> </div> <div id="klib_dialogue_識別子"> // 引数が3個の場合 <h6>タイトル</h6> <p>本文</p> <button type="button" id="klib_dialogue_btn" onclick="$hideDialogue()">OK</button> </div>
Javascript : // CSSタイプ1用:識別子は「def」 $dialogue('def','サンプルダイアログです'); // CSSタイプ2用:識別子は「2」 $dialogue('2','添付できるファイルサイズ‥‥選択しなおしてください。','✕ ファイルが大きすぎます'); $toHTML('klib_dialogue_btn','理解しました'); // $dialogue()を実行してから、$toHTML()でボタン文言を上書きしている
Sass : #klib_dialogue_def { // CSSタイプ1用 max-width: 400px; padding: 30px; color: #fff; text-align: center; background: #000; border-radius: 6px; filter: drop-shadow(rgba(0,0,0,0.3) 4px 4px 3px); p { // 本文部分 margin-bottom: 25px; font-size: 18px; text-align: left; } button#klib_dialogue_btn { // ボタン部分 padding: 8px 30px; font-size: 15px; color: #fff; background: #31b1bc; border: none; border-radius: 16px; cursor: pointer; } } #klib_dialogue_2 { // CSSタイプ2用 max-width: 360px; padding: 30px; color: #000; text-align: right; background: #f5fcfc; border: 3px solid #000; border-radius: 16px; filter: drop-shadow(rgba(0,0,0,0.25) 3px 3px 4px); h6 { // タイトル部分 margin-bottom: 16px; font-size: 18px; text-align: left; } p { // 本文部分 margin-bottom: 25px; font-size: 14px; line-height: 170%; text-align: left; } button#klib_dialogue_btn { // ボタン部分 padding: 8px 30px; font-size: 17px; color: #fff; background: #31b1bc; border: none; border-radius: 6px; cursor: pointer; transition: background 0.25s; &:hover { background: saturate(#31b1bc,20%); } } }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。