使用jQuery解决登录跳出遮罩层

使用jQuery解决登录跳出遮罩层

这是搭配iframe使用的，需要先在页面中引入，我这里的登录按钮时写在iframe里面的

 <iframe src="/top.html" id="topif" frameborder="0" spellcheck="no" style="width: 100%; height: 153px;"></iframe>
<iframe src="/login.html" id="loginif" frameborder="0" spellcheck="no" style="width: 100%; height: 1000px; display: none; position: absolute;"></iframe>

引入之后在jQuery中写入口函数
$(function () {

）}

需要先加载一下iframe,不然页面就会将iframe当作一个标签来使用读取不到里面的数据

$(function () {
//这里是我顶部iframe的id
 $("#topif").on('load', function () {


 ）}
）}

之后就可以用里面的属性了，我这里的dl是，当点击之后让登录页面显示

 <a id="dl">登录</a>

$(function () {
//这里是我顶部iframe的id
 $("#topif").on('load', function () {
$("#topif").contents().find("#dl").click(function () {
$("#loginif").show();
)}

 ）}
）}

想让它隐藏就给一个按钮，当点击时让他隐藏

$(function () {
    

    $("#topif").on('load', function () {
        $("#topif").contents().find("#dl").click(function () {
            $("#loginif").show();

            $("#loginif").contents().find(".yi").click(function () {
                $("#loginif").hide()
            return false;
            
        })
        })
    })
   
})

这样的话一个跳出登录且不会跳转的页面就做好了