イベント・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コードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。