使用modal-实现弹对话框。对话框-对话框

使用modal-实现弹​​出对话框。

一个对话框包含 3 个部分：

对话框头模态-

对话框的modal-body

模态-

在对话框底部

下面的html可以放在标签的任意位置对话框登录界面html，我习惯了跟着标签。

html 代码片段：

			

				

					

						
							×
						
						
登录提示：
					
					

						

							帐号：
							
						
						

							密码：
							
						
					
					

						取消
						登录
					
				
			
		

默认div是隐藏的 aria-=”true”

显示效果：

添加按钮触发弹出对话框。

点击登录...

添加js代码对话框登录界面html，当按钮按下时，会显示对话框($(‘#’).modal(‘show’);).

$(document).ready(function() {
	document.getElementById("loginBntId").onclick = function() {
		$('#loginModalId').modal('show');
	}
	document.getElementById("loginModalYesId").onclick = function() {
		$('#loginModalId').modal('hide');
		alert("登录功能未实现！");
	}
});

给对话框上的登录按钮添加点击事件，事件发生后隐藏对话框($(‘#’).modal(‘hide’);)，触发登录操作(“登录函数没有实现！”)

参考：

文章来源:https://www.cnblogs.com/voipman/p/5070867.html

感谢您的来访，获取更多精彩文章请收藏本站。