1.首先准备好要弹出的内容,一般用ajax向后台请求数据,组装成html:

主页:a.html,含有div:

<div class="cms-window cms-window-other zadd-window salePrd-window">
</div>

副页:b.html

把副页展示在div标签上

2.数据已经组装完成,然后画出要展示内容的高和宽:

function getPos($tar) {
var h = document.body.offsetHeight;
var w = document.body.offsetWidth;
var tarh = $(".cms-body").height();
// var top = (h + tarh) / 2 - $($tar).height() / 2;
var top = h / 2 - $($tar).height() / 2;
var left = w / 2 - $($tar).width();
// console.log(top);
if (top < 0)
top = 0;
return {
'top' : top + "px",
'left' : left + "px"
};
}

3.div.show().css(getPos(classType));

4.主页半透明:

$(".mask").show();

.mask {
  1. position: fixed;
  2. top: 0;
  3. left: 0;
  4. background-color: #000;
  5. z-index: 10003;
  6.  

    filter: alpha(opacity=50);

  7. opacity: .5;
}

js弹窗效果实现的更多相关文章

  1. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  3. JS网页特效操作流程——下拉菜单列表与登录注册弹窗效果

    下拉菜单列表 <style>        *{            margin: 0px;            padding: 0px;        }        .men ...

  4. SharePoint 2013 弹窗效果之URL打开方式(一)

    在SharePoint中想做一个弹出效果其实很简单,仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子:很多情况下我们会通过linkButton弹出一个详细页面,那 ...

  5. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  6. uni-app自定义Modal弹窗组件|仿ios、微信弹窗效果

    介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/an ...

  7. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  8. cefsharp重写默认js弹窗(alert/confirm/prompt)

    1.设置js弹窗控制器 webView.JsDialogHandler = this;  //js弹窗控制 this表示本类对象,所以本类要实现IJsDialogHandler接口 2.实现IJsDi ...

  9. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

随机推荐

  1. 【知识点总结】NOIP前夕 2014.11.4

    2014.11.4 7:33 还有三天半就要NOIP,圈一下要背的知识点: 一.数论 1.素数判断 2.筛法求素数 3.求一个数的欧拉函数值 4.预处理欧拉函数 5.卡塔兰数递推式 6.快速幂(模素数 ...

  2. [CodePlus2017NOV]晨跑

    题目大意: 三个人分别以a,b,c的速度在一个圈上晨跑,在时间为0时,他们一起出发,问何时能相遇? 思路: lcm(a,b,c)即可. #include<cstdio> #include& ...

  3. N进制加法

    我是网络公司的一名普通程序员,英文名Steven,发音比较像“师弟”,自从入职培训自我介绍后,大家就称我为“二师弟”,我喜欢看科幻小说,也喜欢做梦,有一次梦到外星球,发现外星人使用的并非10进制/16 ...

  4. int和Integer,String和String(包装类)

    1.int和Integer的值如果是一样的,则是在内存中开辟相同的内存空间 2.但是String和String(包装类)是不一样的 代码演示: int a=1; Integer b = new Int ...

  5. pythonGUI编程用Canvas模拟画板

    代码如下: from tkinter import * import webbrowser root = Tk() w = Canvas(root,width=400,height=200) w.pa ...

  6. Linux内核转发技术

    前言 在linux内核中,通常集成了带有封包过滤和防火墙功能的内核模块, 不同内核版本的模块名称不同, 在2.4.x版本及其以后的内核中, 其名称为iptables, 已取代了早期的ipchains和 ...

  7. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  8. javascript快速入门16--表格

    表格的层次结构 <table border="1"> <caption>表格标题</caption> <thead> <tr& ...

  9. javascript快速入门12--函数式与面向对象

    函数 函数是一组可以随时随地运行的语句. 函数是 ECMAScript 的核心. 创建函数 function fnOne() {//具有名称的函数,函数名必须符合变量名命名规范 //可以没有符何语句 ...

  10. http://blog.csdn.net/pet8766/article/details/8186955

    http://blog.csdn.net/pet8766/article/details/8186955