AmazeUI在模态框中嵌入表单形成模态输入框


Posted in HTML / CSS onAugust 20, 2020

在《【AmazeUI】模态框》(点击打开链接)一文中,已经介绍过在AmazeUI这个手机版前端框架中,怎么使用模态框了,但是这篇文章提到的模态框只是那些单纯的模态框。如果要实现一个有表单,同时又有“提交”与“关闭”的按钮,要做出如下的效果,哪应该怎么实现呢?

AmazeUI在模态框中嵌入表单形成模态输入框

首先同样是HTML布局:

<!--使用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">
        <!--自动适应移动屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=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" href="assets/css/amazeui.min.css">
        <link rel="stylesheet" href="assets/css/app.css">
        <!--引入js的时候要注意,必须先引入jQuery,再引入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-btn am-btn-primary" onClick="openModal()">登录</button>
        <!--模态框-->
        <div class="am-modal am-modal-alert" tabindex="-1" id="login">
            <div class="am-modal-dialog">
            	<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脚本则如下实现: 

<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模态输入框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
amaze ui 的使用详细教程
Aug 19 #HTML / CSS
AmazeUI中模态框的实现
Aug 19 #HTML / CSS
Ratchet 模态框的实现
Aug 19 #HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 #HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 #HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 #HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 #HTML / CSS
You might like
php学习之简单计算器实现代码
2011/06/09 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
js实现图片360度旋转
2017/01/22 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python-基础-入门 简介
2014/08/09 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
材料化学应届生求职信
2013/10/09 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
高一学生期末评语
2014/04/25 职场文书
扬州个园导游词
2015/02/06 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Django基础CBV装饰器和中间件
2022/03/22 Python
MongoDB支持的索引类型
2022/04/11 MongoDB