jQuery 比较方便就是创建删除了，所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed（与浏览器窗口有关）和z-index覆盖body 并利用opacity设置其透明度产生新层，绝对定位absolute（已定位祖先元素有关）实现布局，然后在新的div上关联一个单击事件并执行remove，一个比较有意思的问题是iframe 中src的设置，这个可以用同胞的方法获取。比如说

原来是<a href=""><img src="" ></a>

若要弹出效果   可以<div><img src="" ><a href=""></a></div> 简单说就是把a标签放到到附近当生成新的层的时候通过同胞后代的方法获取a标签的href设置iframe  的src。

贴一段代码 当点击红色区域的时候iframe变化，

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

#yiceng{background-color: gray; padding: 20px;

height:2000px;

  width:1000px;

}

#guanbi{margin: 30px 120px 0px 120px;

height:300px;

  width:1000px;

background-color:red;

text-align:center;

}

.zhanshiqu{margin: 20px;

height:800px;

  width:600px;

}

</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("#guanbi").click(function(){

        var xin=$(".ceshi img").next().attr("href");

     $("iframe").attr("src",xin);

  });

});

</script>

</head>

<body><div class="ceshi"><img src="http://www.ifangtuan.com/data/files/mall/xiangce/131104/201311040923523798.png"><a id="myAnchor" href="http://www.ifangtuan.com/index.php?app=news" target="view_frame">Microsoft</a></div>

<div id="yiceng"><div id="guanbi"><iframe src="http://www.ifangtuan.com/index.php?app=goods&act=views&id=442&cate_id=1" class="zhanshiqu" name="view_frame"></iframe></div></div>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

<button>删除 div 元素</button>

</body>

</html>

弹出层iframe链接设置的更多相关文章

  1. 关于弹出层(iframe)时刷新页面的js

    [javascript] view plaincopyprint? iframe弹出子页面刷新父页面iframe parent.location.reload(); [javascript] view ...

  2. Layerui 弹出层的位置设置

    距顶 offset: '300px' 例1: layer.msg("请先选择项!", { offset: '300px' });例2: layer.confirm("确定 ...

  3. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  4. jQuery.reveal弹出层使用

    最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...

  5. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  6. layer弹出层的iframe页面回调

    $("#ChoiceBank").click(function () { var width = $("#content").css("Width&q ...

  7. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  8. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  9. Vue SPA应用中使用Layer的iframe 弹出层,并且传值

    问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...

随机推荐

  1. 部署ASP.Net项目 遇到总是启用目录浏览或者报HTTP 错误 403.14 - Forbidden 的原因

    部署Asp.Net 网站总是报下面的问题 原因: 没有为网站指定默认文档,增加默认文档 1.选中“默认文档” 2.点击右边“打开功能” 点击右边“添加”按钮,把你想作为的默认页面添加就可以了,重启服务 ...

  2. [Locked] Binary Tree Longest Consecutive Sequence

    Binary Tree Longest Consecutive Sequence Given a binary tree, find the length of the longest consecu ...

  3. POJ 2057 The Lost House

    题意:一只蜗牛,它的房子在树上的某个叶子节点上,它要从树的根节点出发,寻找自己的房子.树的任意两个节点的距离为1,房子出现在每个叶子节点上的可能性一样.有的节点上有虫子,如果有虫子,虫子会告诉蜗牛它的 ...

  4. 值得关注的 10 个 Python 英文博客

    英文原文:http://pythontips.com/2013/07/31/10-python-blogs-worth-following/ 中文翻译参考: http://python.jobbole ...

  5. XDocument和XmlDocument的区别

    刚开始使用Xml的时候,没有注意到XDocument和XmlDocument的区别,后来发现两者还是有一些不同的. XDocument和XmlDocument都可以用来操作XML文档,XDocumen ...

  6. js中正则表达式的使用

    1,作用:匹配一个字符串中的一些内容2,声明和使用: 1),构造函数 var reg=new RegExp(/表达式/) 2),字面量 var reg=/表达式/ 推荐使用 eg: var reg=/ ...

  7. MySQL删除重复记录的方法

    参考网上的方法,总结了产出重复记录的方法,欢迎交流. 参考:http://www.cnblogs.com/nzbbody/p/4470638.html 方法1:创建一个新表临时储存数据 假设我们有一个 ...

  8. OpenReports操作指南

    最近要玩OpenReports,但在网上找了一圈,能用的资料少得可怜,所以把最近使用下来,积累的一些技巧记录下来(有部分整合了网上的资源). 备注:以下操作说明基于已做汉化的项目(汉化方案请参考:ht ...

  9. 庖丁解牛FPPopover

    作者:ani_di 版权所有,转载务必保留此链接 http://blog.csdn.net/ani_di 庖丁解牛FPPopover FPPopover是一个实现Popover控件的开源项目,比标准控 ...

  10. Cocostudio学习笔记（1） 扯扯蛋 + 环境搭建

    转眼七月份就到了,2014已经过了一半,而我也最终算是有"一年工作经验"了,开心ing. 回想这一年Cocos2dx的游戏开发经历,去年下半年重心主要在游戏的逻辑上,而今年上半年重 ...