登录弹窗功能
实现在任何页面都可以弹出登录窗体
登录页面代码
<section class="login-img">
<span class="X">退出X</span>
<form action="#" method="post">
<ul>
<li class="dlzc">登录</li>
<li>注册</li>
</ul>
<section class="nnf">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<input type="text" placeholder="请输入手机号或邮箱" class="sm">
</td>
</tr>
<tr>
<td colspan="2">
<input type="password" placeholder="请输入密码" class="sm">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="立即登录" class="anniu">
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox">我已阅读并同意《音悦Tai服务条款》
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="hidee">
<tr>
<td colspan="2">
<input type="text" placeholder="请输入手机号或邮箱" class="sm">
</td>
</tr>
<tr>
<td colspan="2">
<input type="password" placeholder="请输入密码" class="sm">
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入验证码" class="yanzhen">
</td>
<td>
获取验证码
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="立即注册" class="anniu">
</td>
</tr>
</table>
</section>
</form>
</section>
<section class="login-ping">
</section>
< iframe > 元素可以用来嵌入一个独立的HTML文档到当前页面中。
<!-- 头部导航 -->
<iframe src="/headr.html" id="topif" frameborder="0" scrolling="no" style="width: 100%;height: 162px;"></iframe>
<iframe src="/login.html" id="loginif" frameborder="0" scrolling="no"style="width: 100%;height: 2500px;display: none; position: absolute;"></iframe>
JQuery代码
$(function () {
$("#topif").on('load', function () {
$("#topif").contents().find(".login").click(function () {
$("#loginif").show();
$("#loginif").contents().find(".X").click(function () {
$("#loginif").hide()
return false;
})
})
})
})
将 JQuery 代码封装到 js 中并引入使用,就不用每个页面都复制一遍,减少代码量
<script src="js/jquery-3.7.1.js"></script>