AmazeUIがモーダルボックスにフォームを埋め込んでモーダルインプットボックスを形成する
2022-01-11 22:28:18
AmazeUI]モーダルボックスで( クリックするとリンクが開きます ) モバイルフロントエンドフレームワークであるAmazeUIでのモーダルボックスの使い方は既に紹介しましたが、今回紹介したモーダルボックスはあくまで簡易的なものです。フォームに"submit"と"close"ボタンを実装して以下のような効果を出したい場合、どうすれば良いでしょうか？
まず、もう一度、HTMLのレイアウトを確認します。
<! -- Developing with HTML5 -->
<!doctype html>
<html class="no-js">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<! -- Auto-adapt to mobile screens -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<! -- Preferred rendering with webkit kernel -->
<meta name="renderer" content="webkit">
<! -- don't be transcoded by Baidu -- >
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<! -- The following is what introduces the amazeui resource -- >
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<! -- When introducing js, note that jQuery must be introduced first, then amazeui, because the framework is based on jQuery -- >
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<title>Modal</title>
</head>
<body>
<button class="am-btn am-btn-primary" onClick="openModal()">login</button>
<! --modal box-->
<div class="am-modal am-modal-alert" tabindex="-1" id="login">
<div class="am-modal-dialog">
<div class="am-modal-hd">login</div>
<div class="am-modal-bd">
<! --modal-box-content-->
<table>
<tr>
<td>Username: </td>
<td><input type="text" id="username"/></td>
</tr>
<tr>
<td>password: </td>
<td><input type="password" id="password"/></td>
</tr>
</table>
</div>
<div class="am-modal-footer">
<! -- The key is to add the data-am-modal-confirm and data-am-modal-cancel attributes to the two buttons here -- >
<span class="am-modal-btn" data-am-modal-confirm>submit</span>
<span class="am-modal-btn" data-am-modal-cancel>close</span>
</div>
</div>
</div>
</body>
</html>
その後、このHTMLスクリプトは、以下のJavaScriptにリンクされることになります。
例えば、このモーダルインプットボックスが、"Login" ボタンが押された時点で表示される場合、JavaScriptスクリプトは以下のように動作します。
<script>
function openModal(){
$('#login').modal({
onConfirm: function() {
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
alert("The user clicked submit and entered username:"+username+", password:"+password+", followed by the general ajax submission form");
},
onCancel: function() {
alert("The user clicked the close button");
}
});
}
</script>
この記事はAmazeUIがモーダルボックスにフォームを埋め込んでモーダル入力ボックスを形成することについてのすべてです、より関連するAmazeUIモーダル入力ボックスの内容は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続きご覧ください、今後、よりスクリプトハウスをサポートしていただけると幸いです！。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン