在《【 am azeUI】模态框》（ 点击打开链接 ）一文中，已经介绍过在AmazeUI这个手机版 前端框架 中，怎么使用模态框了，但是这篇 文章 提到的模态框只是那些单纯的模态框。如果要实现一个有表单，同时又有[提交]与[关闭]的按钮，要 做出 如下的效果，哪 应该 怎么实现呢？
首先同样是HT ML 布局：
<!--使用HTML5开发-->
<!docty PE html>
<html class="no-js">
<html>
<head>
< ;m eta http-equiv="Content -t ype" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE= Edge ">
<!--自动适应移动屏幕-->
<meta name="viewport" content="width=device-width, in IT ial -s cale=1, maximum-scale=1, user-scalable=no">
<!--优先使用 webkit 内核渲染-->
<meta name="renderer" content="webkit">
<!--不要被 百度 转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--以下才是引入amazeui资 源 -->
<link rel="stylesheet" hr ef="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<!--引入js的时候要注意，必须先引入 jq uery，再引入amazeui，因为这个框架是基于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- BT n am-btn- Primary " onClick="openModal()">登录</button>
<!--模态框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="lo gin ">
<div class="am-modal-dia LOG ">
<div class="am-modal-hd">登录</div>
<div class="am-modal-bd">
<!--模态框内容-->
<table>
<tr>
<td>用户名：</td>
<td><input type="text" id="username"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password"/></td>
</tr>
</table>
</div>
<div class="am-modal-footer">
<!--关键是在这里为两个按钮加上data-am-modal-confirm与data-am-modal-cancel属性-->
<span class="am-modal-btn" data-am-modal-confirm>提交</span>
<span class="am-modal-btn" data-am-modal-cancel>关闭</span>
</div>
</div>
</div>
</body>
</html>
之后，这段HTML脚本要跟下面的JavaScript联系起来。
比如一按[登录]按钮，则显示这个模态输入框，JavaScript脚本则如下实现：&nbs p;
<script>
function openModal(){
$(' # login').modal({
onConfirm: function() {
VAR username=document.getElementById("username").value;
var password=document.getElementById("password").value;
alert("用户点击了提交，输入了用户名："+username+"，密码："+password+"，接下去一般是ajax提交表单");
},
onCancel: function() {
alert("用户点击了关闭按钮");
}
});
}
</script>
到此这篇关于AmazeUI在模态框中嵌入表单形成模态输入框的文章就介绍到这了,更多相关AmazeUI模态输入框内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 AmazeUI在模态框中嵌入表单形成模态输入框 全部内容，希望文章能够帮你解决 AmazeUI在模态框中嵌入表单形成模态输入框 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于AmazeUI在模态框中嵌入表单形成模态输入框的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did206070