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. 1.4(Spring学习笔记)Spring-JDBC基础

    一.Spring JDBC相关类 1.1 DriverManagerDataSource DriverManagerDataSource主要包含数据库连接地址,用户名,密码. 属性及含义如下配置所示: ...

  2. 微服务之SpringCloud实战(三):SpringCloud Eureka高可用

    高可用Eureka 高可用我就不再过多解释了,Eureka Server的设计一开始就考虑了高可用的问题,在Eureka的服务治理设计中,所有的节点即是服务提供方也是消费方,注册中心也不例外,上一章中 ...

  3. 命令行下的C++程序转换成VC的MFC程序需要注意的问题

    在将命令行下的C++程序转换成MFC窗口程序时一般会提示下面这种错误: fatal error C1010: unexpected end of file while looking for prec ...

  4. OC语言基础之NSDictionary

    1.NSDictionary字典的创建 1: // key value 2: // key -==> value 3: NSDictionary *dict = [NSDictionary di ...

  5. linux下安装python2.7.5和MYSQLdb

    由于开发的python web 扫描器需要在python2.7.5以及需要MYSQLdb这个库的支持,在此做一个记录,避免更换到新环境时的学习成本. 一.安装MYSQL 1.yum install m ...

  6. vb6转16进制

    Public Function xEncode(ByVal strEncode As String) As String If strEncode <> "" Then ...

  7. 【spring data jpa】jpa中使用in查询或删除 在@Query中怎么写 ,报错:org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'goodsConfigUid' cannot be found on null 怎么处理

    示例代码如下: @Modifying @Transactional @Query("delete from GoodsBindConfigMapping gbc " + " ...

  8. jquery.mobile 中 collapsible-set collapsible listview 共同布局问题

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...

  9. Java程序员到架构师的推荐阅读书籍

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...

  10. java中遍历Map几种方法

    java中的map遍历有多种方法,从最早的Iterator,到java5支持的foreach,再到java8 Lambda,让我们一起来看下具体的用法以及各自的优缺点. 先初始化一个map: publ ...