设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 83|回复: 13

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

[复制链接]

2

主题

53

回帖

151

积分

注册会员

积分
151
发表于 2024-4-20 10:28:48 | 显示全部楼层 |阅读模式
在《【AmazeUI】模态框》(点击打开链接)一文中,已经介绍过在AmazeUI这个手机版前端框架中,怎么使用模态框了,但是这篇文章提到的模态框只是那些单纯的模态框。如果要实现一个有表单,同时又有“提交”与“关闭”的按钮,要做出如下的效果,哪应该怎么实现呢?

首先同样是HTML布局:
  1. <!--使用HTML5开发-->
  2. <!doctype html>
  3. <html class="no-js">
  4. <html>
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.         <!--自动适应移动屏幕-->
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  10.         <!--优先使用webkit内核渲染-->
  11.         <meta name="renderer" content="webkit">
  12.         <!--不要被百度转码-->
  13.         <meta http-equiv="Cache-Control" content="no-siteapp"/>
  14.         <!--以下才是引入amazeui资源-->
  15.         <link rel="stylesheet" href="assets/css/amazeui.min.css">
  16.         <link rel="stylesheet" href="assets/css/app.css">
  17.         <!--引入js的时候要注意,必须先引入jQuery,再引入amazeui,因为这个框架是基于jQuery开发的-->
  18.         <script src="assets/js/jquery.min.js"></script>
  19.         <script src="assets/js/amazeui.min.js"></script>
  20.         <title>Modal</title>
  21.     </head>   
  22.     <body>
  23.         <button class="am-btn am-btn-primary" onClick="openModal()">登录</button>
  24.         <!--模态框-->
  25.         <div class="am-modal am-modal-alert" tabindex="-1" id="login">
  26.             <div class="am-modal-dialog">
  27.                     <div class="am-modal-hd">登录</div>
  28.                 <div class="am-modal-bd">
  29.                 <!--模态框内容-->
  30.                     <table>
  31.                         <tr>
  32.                             <td>用户名:</td>
  33.                             <td><input type="text" id="username"/></td>
  34.                         </tr>
  35.                         <tr>
  36.                             <td>密码:</td>
  37.                             <td><input type="password" id="password"/></td>
  38.                         </tr>
  39.                     </table>
  40.                 </div>
  41.                 <div class="am-modal-footer">
  42.                         <!--关键是在这里为两个按钮加上data-am-modal-confirm与data-am-modal-cancel属性-->
  43.                     <span class="am-modal-btn" data-am-modal-confirm>提交</span>
  44.                     <span class="am-modal-btn" data-am-modal-cancel>关闭</span>     
  45.                 </div>
  46.             </div>
  47.         </div>      
  48.         
  49.     </body>
  50. </html>
复制代码
之后,这段HTML脚本要跟下面的JavaScript联系起来。
比如一按“登录”按钮,则显示这个模态输入框,JavaScript脚本则如下实现:
  1. <script>
  2. function openModal(){
  3.         $('#login').modal({
  4.                 onConfirm: function() {
  5.                         var username=document.getElementById("username").value;
  6.                         var password=document.getElementById("password").value;
  7.                         alert("用户点击了提交,输入了用户名:"+username+",密码:"+password+",接下去一般是ajax提交表单");
  8.                 },
  9.                 onCancel: function() {
  10.                         alert("用户点击了关闭按钮");
  11.                 }
  12.         });
  13. }
  14. </script>
复制代码
到此这篇关于AmazeUI在模态框中嵌入表单形成模态输入框的文章就介绍到这了,更多相关AmazeUI模态输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
  • 打卡等级:初来乍到
  • 打卡总天数:3
  • 打卡月天数:0
  • 打卡总奖励:58
  • 最近打卡:2024-05-18 00:02:24

2

主题

105

回帖

432

积分

等待验证会员

积分
432
发表于 2024-5-28 10:53:20 | 显示全部楼层
谢谢你分享这个信息

0

主题

50

回帖

99

积分

注册会员

积分
99
发表于 2024-6-13 02:00:16 | 显示全部楼层
非常感谢你的观点,让我受益良多!

0

主题

59

回帖

119

积分

注册会员

积分
119
发表于 2024-6-25 10:46:01 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!

2

主题

39

回帖

123

积分

注册会员

积分
123
发表于 2024-7-5 16:23:12 | 显示全部楼层
顶一个,观点非常中肯!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:9
  • 最近打卡:2024-05-10 17:34:07

4

主题

40

回帖

179

积分

注册会员

积分
179
发表于 2024-8-2 13:56:24 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!

1

主题

54

回帖

132

积分

注册会员

积分
132
发表于 2024-8-12 17:54:57 | 显示全部楼层
我想了解更多

0

主题

78

回帖

157

积分

注册会员

积分
157
发表于 2024-8-13 11:36:32 | 显示全部楼层
666666666666666666
  • 打卡等级:初来乍到
  • 打卡总天数:4
  • 打卡月天数:0
  • 打卡总奖励:85
  • 最近打卡:2024-07-12 14:52:17

0

主题

33

回帖

189

积分

注册会员

积分
189

热心会员付费会员

发表于 2024-8-14 10:44:18 | 显示全部楼层
666666666666

1

主题

53

回帖

129

积分

注册会员

积分
129
发表于 2024-10-12 08:31:20 | 显示全部楼层
看了LZ的帖子,我只想说一句很好很强大!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:20 , Processed in 0.100111 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表