弹出层iframe链接设置
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链接设置的更多相关文章
- 关于弹出层(iframe)时刷新页面的js
[javascript] view plaincopyprint? iframe弹出子页面刷新父页面iframe parent.location.reload(); [javascript] view ...
- Layerui 弹出层的位置设置
距顶 offset: '300px' 例1: layer.msg("请先选择项!", { offset: '300px' });例2: layer.confirm("确定 ...
- jQuery.reveal弹出层
jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...
- jQuery.reveal弹出层使用
最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说了算. 这个插件是基于Jquery实现 ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- layer弹出层的iframe页面回调
$("#ChoiceBank").click(function () { var width = $("#content").css("Width&q ...
- 点击图片或者鼠标放上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 ...
- layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- Vue SPA应用中使用Layer的iframe 弹出层,并且传值
问题来源: BOOS 竟然说喜欢有可移动可最大化的弹出层,这!!! SPA 模式下就是这种引入Vue.js的写法 layer.open({ type: , area: ['840px', '550px ...
随机推荐
- Swap Nodes in Pairs——LeetCode
Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...
- String拼接也有用加号更好的时候
做String拼接时用StringBuilder(或StringBuffer)好还是直接用+号性能好?一般来说是前者,不过也有用加号略好的时候.首先我一直认为用+号有很好的可读性,而且当String拼 ...
- bzoj3223 Tyvj 1729 文艺平衡树（Splay Tree+区间翻转）
3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 2202 Solved: 1226[Submit][Sta ...
- 详解udev
如果你使用Linux比较长时间了,那你就知道,在对待设备文件这块,Linux改变了几次策略.在Linux早期,设备文件仅仅是是一些带有适当的属性集的普通文件,它由mknod命令创建,文件存放在/dev ...
- Nginx+keepalived做双机热备加tomcat负载均衡
Nginx+keepalived做双机热备加tomcat负载均衡 环境说明: nginx1:192.168.2.47 nginx2:192.168.2.48 tomcat1:192.168.2.49 ...
- STL——increment/decrement/dereference操作符
increment/dereference操作符在迭代器的实现上占有非常重要的地位,因为任何一个迭代器都必须实现出前进(increment,operator++)和取值(dereference,ope ...
- codevs1002搭桥（建图+Prim）
/* 先来个灌水法 然后建图跑最小生成树 注意观察题目中的规则 a[1][i]!=a[1][j]&&abs(a[2][i]-a[2][j])<=1 建图的时候可以每一个建筑物都看 ...
- AndroidStudio SDK版本下载
错误描述: pkg: /data/local/tmp/com.example.myapplication Failure [INSTALL_FAILED_OLDER_SDK] 出现这个错误,研究了半天 ...
- @ManyToMany 两个表多对多关联
两个表属于多对多关系 如 Teacher <=> Student 表teacher 主键 id 表student 主键id 中间关联表 teacher_student 两个字段 t_id ...
- js原生封装自定义滚动条
/* * @Author: dothin前端 * @Date: 2015-11-21 00:12:15 * @Last Modified by: dothin前端 * @Last Modified t ...