<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的jquery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 //拖拽窗口
 $(function(){
  var x,y;
  var i=0;
  $(".box .tit").mousedown(function(e){
   i=1;
   x = e.pageX-parseInt($(".box").css("left"));
   y = e.pageY-parseInt($(".box").css("top"));
   $(".box").fadeTo(200, 0.5);
  })
  $(document).mousemove(function(e){
   if(i == 1){
    x2 = e.pageX - x;
    y2 = e.pageY - y;
    if(x2 < 0){x2 = 0;}
    if(x2 > 800){x2 = 800;}
    if(y2 < 0){y2 = 0;}
    if(y2 > 700){y2 = 700;}
    $(".box").css({top:y2,left:x2});
   }
  }).mouseup(function(){
    i=0;
    $(".box").fadeTo(200, 1);
   })
 })
 //拖拽窗口end
 
 //iframe弹出层
 function tanchuceng(width,height,tit,url){
  var winWinth = $(window).width(),winHeight = $(document).height();
  $("body").append("<div class='winbj'></div>");
  $("body").append("<div class='tanChu'><div class='tanChutit'><span class='tanchuTxt'>"+tit+"</span><span class='tanchuClose'>关闭</span></div><iframe class='winIframe' frameborder='0' hspace='0' src="+ url +"></iframe></div>");
  $(".winbj").css({width:winWinth,height:winHeight,background:"#000",position:"absolute",left:"0",top:"0"});
  $(".winbj").fadeTo(0, 0.5);
  var tanchuLeft = $(window).width()/2 - width/2;
  var tanchuTop = $(window).height()/2 - height/2 + $(window).scrollTop();
  $(".tanChu").css({width:width,height:height,border:"3px #ccc solid",left:tanchuLeft,top:tanchuTop,background:"#fff",position:"absolute"});
  $(".tanChutit").css({width:width,height:"25px","border-bottom":"1px #ccc solid",background:"#eee","line-height":"25px"});
  $(".tanchuTxt").css({"text-indent":"5px","float":"left","font-size":"14px"});
  $(".tanchuClose").css({"width":"40px","float":"right","font-size":"12px","color":"#666","cursor":"pointer"});
  var winIframeHeight = height - 26;
  $(".winIframe").css({width:width,height:winIframeHeight,"border-bottom":"1px #ccc solid",background:"#ffffff"});
  $(".tanchuClose").hover(
   function(){
    $(this).css("color","#333");
   },function(){
    $(this).css("color","#666");
   }
  );
  $(".tanchuClose").click(function(){
   $(".winbj").remove();
   $(".tanChu").remove();
  });
 }
 //iframe弹出层end
 
 //模仿alert
 function mfalert(txt){
  var width = $(".mfalert").width() + 20;
  var mfalertLeft = $(window).width()/2 - width/2;
  var mfalertTop = $(window).height()/2 - 30/2 + $(window).scrollTop();
  $("body").append("<div class='mfAlert'>"+txt+"</div>");
  $(".mfAlert").css({width:width,height:"30px",border:"1px #333 solid",left:mfalertLeft,top:mfalertTop,background:"#ccc",position:"absolute","text-align":"center","line-height":"30px"});
  setTimeout("$('.mfAlert').remove()",3000);
 }
 //模仿alert end
</script>
<style>
*{padding:0;margin:0;font-size:12px;}
.layout{width:1000px;height:800px;border:1px #000 solid;border-width:0 1px;margin:0 auto;padding:1px; position:relative;}
.box{width:200px;height:100px;border:1px #ccc solid; position:absolute;left:100px;top:20px;}
.box .tit{height:20px;width:100%;background:#eee;border-bottom:1px #ccc solid; line-height:20px; text-indent:10px;}
.box .lis{line-height:20px; text-indent:5px;}
.tanchu{position:absolute; left:20px;top:20px;}
.mfalert{position:absolute; left:20px;top:50px;}
</style>
</head>

<body>
<div class="layout">
 <a href="#" class="tanchu" onclick="tanchuceng(600,300,'我是中文','test.html')">弹出层</a>
 <div class="box">
     <div class="tit">点住我移动</div>
        <div class="lis">我是可移动的</div>
    </div>
    <a href="#" class="mfalert" onclick="mfalert('3秒就没了')">点我输出</a>
</div>
</body>
</html>

页面中iframe 弹层 和拖动效果的更多相关文章

  1. 使用layui iframe弹层,各弹层之前的传值问题

    最近做一个后台管理系统,用到的layui,主要是使用它的弹层,但是各个弹层之前的传值经常容易搞晕,写个个博客记录一下,方便自己,也方便别人, 首先我的页面已经嵌套了好几个iframe页面了,嵌套了三个 ...

  2. html页面中iframe导致JavaScript失效

    <body onload=“reset()”> <div id="part1"> some thing here .... <div> < ...

  3. Jquery 操作页面中iframe自动跟随窗口大小变化，而页面不出现滚动条，只在iframe内部出滚动条

    很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下 ...

  4. 页面中iframe中嵌入一个跨域的页面，让这个页面按照嵌入的页面宽高大小显示的方式；iframe嵌套的页面不可以编辑的问题解决方案

    <html> <head> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; ...

  5. 当页面中(比如弹出框SelectPage)没有textbox等控件如何按Esc关闭

    1.在网页上添加一个空白的ASPxTextBox控件 <dxe:ASPxTextBox ID="txt_Name" Width="1" runat=&qu ...

  6. PHP中如何实现 “在页面中一边执行一边输出” 的效果

    <?php    set_time_limit(0);  //在有关数据库的大量数据的时候,可以将其设置为0,表示无限制.    ob_end_clean();     //在循环输出前,要关闭 ...

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

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

  8. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  9. 弹层组件-layer

    layer是Layui的一个弹层组建,功能强大,总之我很喜欢,下面介绍这个组件的基本用法. 首先如果只需要使用layer而不想使用Layui可以单独下载layer组件包,页面引入jquery1.8以上 ...

随机推荐

  1. windows xp .net framework 4.0 HttpWebRequest 报The underlying connection was closed,基础连接已关闭

    windows xp .net framework 4.0 HttpWebRequest 报The underlying connection was closed,基础连接已关闭,错误的解决方法 在 ...

  2. 2018-12-2-C#-Span-入门

    title author date CreateTime categories C# Span 入门 lindexi 2018-12-02 11:32:46 +0800 2018-06-18 11:1 ...

  3. Linux账号管理与ALC权限设定（二） 批量增加用户脚本

    接上篇.鸟哥提出了一个问题.就是 如果myuser1用户是这个项目的助理,他只能查看该目录下的内容,而无法修改删除.那该如何操作呢? 首先,不能将该用户加入projecta这个群组,否则他也可以修改删 ...

  4. 正规式α向有限自动机M的转换

    [注:这一节是在学习东南大学廖力老师的公开课时,所记录的一些知识点截屏,谢谢廖力老师的辛劳付出] 引入3条正规式分裂规则来分裂α,所得到的是NFA  M(因为包含ε弧,之后进行确定化就是所需要求得DF ...

  5. leetcode-168周赛-1298-你能从盒子中获得的最大糖果数

    题目描述: 方法一:bfs class Solution: def maxCandies(self, status: List[int], candies: List[int], keys: List ...

  6. TCP三次挥手

    tcp:三次握手 client和server之间需要经历三次握手才能建立连接(connnect()方法中封装了三次握手的步骤)syn:同步请求,建立连接的请求ack:对syn请求包的确认 应答syn: ...

  7. Robot Framework：Excel操作

    robot framework 操作Excel需要安装库 ExcelLibrary pip install robotframework-ExcelLibrary 将ExcelLibrary 导入到r ...

  8. SaaS上云工具包为企业应用构筑上云之梯

    导语:本文中,阿里云资深技术专家郑刚将聚焦SaaS上云工具包如何帮助企业上云,包括产品上云.商品上市.服务上心,讲述了SaaS上云工具包为客户和伙伴提供的价值.在SaaS上云工具包整体解决方案的帮助下 ...

  9. MySQL常规操作以及问题

    背景 作为一个前端,偶尔搞下后端 要熟悉 SQL 操作,但是一段时间不用 会大部分忘记,之后又要重新查资料 所以自己整理一遍经常用到的 SQL 操作 和使用过程遇到的问题,方便自己快速查阅 一.安装 ...

  10. mysql8.*忘记密码

    1.关闭mysql服务 2.打开cmd窗口,找到安装目录下的bin然后复制命令 mysqld --console --skip-grant-tables --shared-memory 3.再打开一个 ...