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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 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中使用虚代理实现延迟加载技术
2014/11/05 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
用js遍历 table的脚本
2008/07/23 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python实现连连看游戏
2020/02/14 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
先进个人总结范文
2015/02/15 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python