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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
js获取Get值的方法
2016/09/29 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Django中的AutoField字段使用
2020/05/18 Python
Python字符串及文本模式方法详解
2020/09/10 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
艺术设计专业个人求职信
2014/04/10 职场文书
医药销售自荐书
2014/05/29 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
美容院员工规章制度
2015/08/05 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python