使用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;
})
})
})
})
这样的话一个跳出登录且不会跳转的页面就做好了