JQ登录(模态框，jq-ui)

分手后的思念是犯贱 2022-06-04 10:17 174阅读 0赞

<!DOCTYPE html>
    <html>
     <head>
      <title> new document </title>
      <meta charset="utf-8">
    	<link href="../jquery-ui.css" rel="stylesheet">
    	<style>
    		#dialog-login{
    			display: none;
    		}
    	</style>
     </head>
     <body>
        <h1>jQueryUI：Widgets —— Dialog</h1>
    	<h3>弹出式对话框</h3>
    	<a href="#" id="btnLogin">我要登录</a>
    
    	<div id="dialog-login" title="用户登录">
    		<form action="">
    			用户名：<input type="text" name="uname"><br>
    			密码名：<input type="password" name="upwd"><br>
    		</form>
    	</div>
    
    	<script src="../external/jquery/jquery.js"></script>
    	<script src="../jquery-ui.js"></script>
    	<script>
    		var $txtName=$("[name=uname]"),
    		    $txtPwd=$("[name=upwd]"),
    			$loginDialog=$("#dialog-login");
    			$formLogin=$("form");
    		$loginDialog.dialog({
    			autoOpen:false,
    			modal:true,
    			show:{effect:"blind",duration:1000},
    			hide:{effect:"explode",duration:1000},
    			buttons:{
    				"登录":()=>{
    				
    				}
    			},
    			close(){//以任何手段关闭对话框时，自动触发！
    				//清空表单内容
    				/*$txtName.val("");
    				$txtPwd.val("");*/
    				$formLogin[0].reset();
    			}
    		});
    		$("#btnLogin").click(()=>{
    			$loginDialog.dialog("open");
    		})
    	</script>
     </body>
    </html>

模态框：有遮罩层，并且弹出时不能点击页面其他元素

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 BootStrap模态框

模态框（Modal）是覆盖在父窗体上的子窗体,是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动子窗体可提供信息、交互等通过dat

客官°小女子只卖身不卖艺/ 2023年07月19日 12:28/ 0 赞/ 63 阅读

相关模态框ajax数据JQ对select下拉框选中

在编辑模态框中，存在下拉选框，选框数据来源与后台点击编辑获取一条数据，自动选中下拉框中的数据上一篇：[模态框获取页面请求数据][Link 1]

àì夳堔傛蜴生んèń/ 2023年02月23日 12:27/ 0 赞/ 32 阅读

相关 HTML 模态框

HTML 模态框复制粘贴就能用 <!DOCTYPE html> <html> <head> <meta charset="ut

妖狐艹你老母/ 2022年10月29日 10:26/ 0 赞/ 255 阅读

相关 217.模态登录框

效果 (源码网盘地址在最后) ![95777608bbdd34dcfd40c891e56faa60.gif][] 源码 index.html <!DOC

待我称王封你为后i/ 2022年09月09日 02:26/ 0 赞/ 164 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 396 阅读

相关 JQ登录(模态框，jq-ui)

<!DOCTYPE html> <html> <head> <title> new document </title> <me

分手后的思念是犯贱/ 2022年06月04日 10:17/ 0 赞/ 175 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 320 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 476 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 439 阅读

相关 Revit 模态框

非模态窗口有一个好处，就是可以一直停留在程序之前，然后持续完成操作。但是在Revit二次开发中，非模态窗口也有几个注意事项。 1、需要在文档关闭的时候，把非模态窗口也关闭掉，

约定不等于承诺〃/ 2022年01月06日 20:29/ 0 赞/ 384 阅读