今回は【jQuery】シンプルなアラートを実装、dndod-popupの使い方!!
の解説になります!
こんな方に読んでほしい
- jQueryを学び始めた方へ
- プラグインのdndod-popupを使って「アラート機能を実装(表示)」をしたい方向け
- 今回はdndod-popupについて解説しております。
今回は、「アラート機能を実装(表示)」についての解説になります。
「dndod-popup」になりますが、今でも簡単で使いやすいプラグインになっております。
イメージ図は上記のようになります。
テキスト(ボタン)をクッリックした際に、シンプルなアラートが表示します。
「閉じるボタン」や、「詳細ボタン」も設定されており、使いやすいプラグインになっております。
dndod-popupとは、「アラート機能を実装(表示)」のことを示します。
jQueryが苦手な方でも問題ありません。
まずは下記のサイトから「dndod-popup」をダウンロードしましょう。
必要なファイルについて
ダウンロード後に必要なファイルについて解説していきます。
まずは、ファイル名の「dndod-master」をご確認ください。
- ●cssファイル
- 1「src」 > 「dndod-popup.min.css」
- ●jsファイル
- 2「src」 > 「dndod-popup.min.js」の2点を使用します。
<!--css-->
<link rel="stylesheet" href="css/dndod-popup.min.css">
<!--js-->
<script src="js/dndod-popup.min.js" type="text/javascript"></script>
また、「dndod-popup.min.js」を使用する際には、dndod-popupを使用する宣言をしなければなりません。
以下のコードを合わせて指定しましょう。
<!--css-->
<link rel="stylesheet" href="css/dndod-popup.min.css">
<!--js-->
<script src="js/dndod-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
showAlert.onclick = function () {
dndod.alert("文章が入ります。");
}
</script>
記述場所について
基本的にはbody
内に指定するようにしましょう。
基本構造の書き方は以下のようになります。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 【jQuery】シンプルなアラートを実装...</title>
<!--css-->
<link rel="stylesheet" href="css/dndod-popup.min.css">
</head>
<body>
コンテンツが入ります。
<!--js-->
<script src="js/dndod-popup.min.js" type="text/javascript"></script>
<script type="text/javascript">
showAlert.onclick = function () {
dndod.alert("文章が入ります。");
}
</script>
</body>
</html>
「アラート」の設定について
次に、「アラート」の設定について解説します。
「シンプルなアラート」の設定について
デモサイトはコチラから。
基本構造の書き方は以下のようになります。
「シンプルなアラート」
<div class="alert-area">
<a href="javascript:;" id="showAlert">シンプルなアラート</a>
</div>
/*--CSS基本は変更 可--*/
/*--ボタンデザイン--*/
.alert-area {
width:30%;
margin-bottom: 5em;
}
.alert-area a {
color: #333;
border: solid 1px #ccc;
font-size: 1.4rem;
padding: .5em 0;
display: block;
}
.alert-area a:hover {
color: #fff;
background-color: #fd6158;
}
/*--アラートに関するCSSは「dndod-popup.min.css」--*/
showAlert.onclick = function () {
dndod.alert("文章が入ります。");
}
今回は、HTMLのa id="showAlert"
に指定しています。
JavaScriptでは、showAlert.onclick
を指定し、dndod.alert("〇〇")
を指定します。
alert("〇〇")
の中に文字を入力し完成になります。
「ボタン名の変更、詳細」の設定について
デモサイトはコチラから。
基本構造の書き方は以下のようになります。
「ボタン名の変更、詳細」
<div class="alert-area">
<a href="javascript:;" id="showConfirm">ボタンを追加</a>
</div>
/*--CSS基本は変更 可 上記と同じ内容--*/
/*--アラートに関するCSSは「dndod-popup.min.css」--*/
showConfirm.onclick = function () {
dndod.popup({
msg: "ボタンを追加",
buttons: [
{
text: "閉じる",
handler: function(e, popup) {
popup.close()
}
},
{
text: "ボタン01",
type: "kakaobank",
handler: function(e, popup) {
dndod.notice("いつもありがとう!!")
}
},
]
});
}
今回は、HTMLのa id="showConfirm"
に指定しています。
JavaScriptでは、showConfirm.onclick
を指定します。
今回は更に、buttons
を追加し、 text: "閉じる"
の設定をします。「閉じる」以外の文字を入力しても問題ありません。
更に、ボタンを追加したい場合は、text
を追加し、dndod.notice("〇〇")
に文字を入力すれば問題ありません。
「type “kakaobank”」はボタンの背景色になります。
まとめ
今回はこれで以上です。
ダウンロードファイル「dndod-master」の中に、他にもデモの種類がありますので、
一度確認してみてください。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事