iframe 登录弹窗

登录弹窗功能

实现在任何页面都可以弹出登录窗体


登录页面代码

    <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>