js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件。分享给大家供大家参考。具体如下：

完整实例代码点击此处本站下载。

用法

<input type="button" id="btn_dialog" value="打开浮层"/>
<div id="dialog-content" style="display:none;">这是内容</div>
<script src="../src/jquery-1.9.1.min.js"></script>
<script src="../src/dialog.js"></script>
<script>
 var dialog = new Dialog();
 dialog.init({target:"#dialog-content",trigger:"#btn_dialog",mask:true,width:500,height:300,title:'标题'});
</script>

或者用jquery方式调用:

<input type="button" id="btn_dialogjquery" value="jq打开浮层"/>
<div id="dialog-contentjq" style="display:none;">这是内容22</div>
<script src="../src/dialog-jquery.js"></script>
<script>
 $('#btn_dialogjquery').Dialog({target:"#dialog-contentjq",mask:true,width:500,height:300,title:'标题'})
</script>

继承类alert和confirm提示(jquery模式下)：

html:

<input type="button" id="btn_alert" value="alert"/>
<input type="button" id="btn_alert2" value="alert定时关闭"/>
<input type="button" id="btn_confirm" value="confirm三种按钮"/>
<input type="button" id="btn_confirmdefault" value="confirm默认"/>

js:

$('#btn_alert').click(function(){
  $.alert('选好商品才能上传素材哦',true,function(){
   alert('你点击了ok')
  })
});
$('#btn_alert2').click(function(){
  $.alert('选好商品才能上传素材哦')
});
$('#btn_confirm').click(function(){
  $.confirm('下载全部 9 张图片至本地相册?<div class="confirm-title2">文字内容已复制</div>',[{yes:"是"},{no:'否'},{close:'关闭'}],function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})
$('#btn_confirmdefault').click(function(){
  $.confirm('你确定要删除这条消息吗? ',null,function(type){
   $.alert('您点击了'+type);
   this.hide();
  });
})

属性或方法:

属性：

trigger:
  触发对象
 
target:
  弹出内容，可以为#id,或者jquery对象
 
mask:
  是否有遮罩层
 
title:
  标题
 
zIndex:
  z-index
 
closeTpl:
  关闭html(默认:<span class="ui-dialog-close js-dialog-close">x</span>)
 
titleTpl:
  标题html(默认：<div class="ui-dialog-title"></div>) 
 
方法及回调：

show:
  显示弹层
 
hide:
  隐藏
 
beforeShow：function(content)
  显示前的方法回调,content是浮层内容对象
 
beforeHide：function(content)
  隐藏前的方法回调,content是浮层内容对象
 
setPosition:function()
  设置位置居中

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS脚本根据手机浏览器类型跳转WAP手机网站（两种方式）

    随着移动互联网的不断普及,企业的网络宣传不仅只局限在PC端,还要在移动端发展.我们在自己的网站做了WAP手机完整之后,如果有用户通过手机访问我们的企业顶级域名网站,就要判断跳转到专为的WAP网站,下面小编通过两种方式介绍根据手机浏览器类型跳转WAP手机网站,具体内容如下. 第一种方式:直接JS脚本 <script type="text/javascript"> try { var urlhash = window.location.hash; if (!urlhash.ma

  • JS识别浏览器类型(电脑浏览器和手机浏览器)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8"/> <title>识别电脑浏览器和手机浏览器</title> </head> <script type="text/java

  • 通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    通过JS自动隐藏手机浏览器的地址栏实现原理与代码

    大家通过手机自带浏览器打开百度.淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分这是WEB APP还是Native App,如下左侧图片为通过safari打开淘宝网的首页,要不是因为底下的浏览器工具栏,还真像Native App.实际上它是有地址的,向下拖动就会看到地址栏,如下右侧图片. 如何才能实现将浏览器地址栏隐藏呢?百度一下,有很多资料,很简单,主要利用window.scrollTo()方法,将当前页面在屏幕上向上滚动,造成地址栏

  • JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器

    js 判断是什么类型浏览器 复制代码 代码如下: if ( window.sidebar && "object" == typeof( window.sidebar ) && "function" == typeof( window.sidebar.addPanel ) ) //  firefox {  }   else if ( document.all && "object" == typeof

  • 用js获取电脑信息(是使用与IE浏览器)

    用js获取本地电脑信息(但是只能在IE浏览器下才行,其他浏览器其获取不到的): 复制代码 代码如下: <!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"&

  • js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

    本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件.分享给大家供大家参考.具体如下: 完整实例代码点击此处本站下载. 用法 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="display:none;">这是内容</div> <sc

  • js实现兼容PC端和移动端滑块拖动选择数字效果

    本文为大家分享了js实现移动端滑块拖动选择数字的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="viewport&qu

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • 原生JS实现pc端轮播图效果

    原生JS实现pc端轮播图效果

    本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下 案例:轮播图需求 布局:ul下有很多li标签:浮动在一行: 原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden: 功能需求: 序号轮播 左右按钮的轮播 自动轮播 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播 实现效果: html部分 <div class="box" id="box"> <div class=

  • node.js中PC端微信小程序包解密的处理思路

    node.js中PC端微信小程序包解密的处理思路

    目录 小程序的源码在哪里 PC端小程序是怎么被加密的 解密思路 预处理 加密后的头部部分 加密后的尾部部分 再漂亮点 commander chalk 源代码 原来发布在掘金,搬过来好了. 微信小程序在PC端是加密存储的,如果直接打开是看不到什么有用的信息的,需要经过解密才可以看到包内具体的内容.本文使用nodejs实现解密算法,主要涉及到crypto, commander, chalk三个包的使用. 小程序的源码在哪里 PC端打开过的小程序会被缓存到本地微信文件的默认保存位置,可以通过微信PC端

  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    纯js+css实现仿移动端淘宝网站的弹出详情框功能

    点击查看图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="ap

  • JS实现新浪微博效果带遮罩层的弹出框代码

    JS实现新浪微博效果带遮罩层的弹出框代码

    本文实例讲述了JS实现新浪微博效果带遮罩层的弹出框代码.分享给大家供大家参考.具体如下: 这是一款新浪微博效果的弹出框,现成的JS代码,兼容IE6+,以及各主流浏览器.新浪微博弹出层并可拖拽,操作轻松舒适,符合用户的浏览习惯,将代码推荐给各位网友. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-zzxg-dlg-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • js实现点击图片在屏幕中间弹出放大效果

    js实现点击图片在屏幕中间弹出放大效果 效果图 点击图片后 关键代码 html <div> <img height="100" width="100" src="https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg" class="pic"/> <img height="100" wid

  • js实现鼠标移到链接文字弹出一个提示层的方法

    本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • JS遍历ul下的li点击弹出li的索引的实现方法

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> </div> 我们遍历ul 下所有的li 并添加点击事件,一般我们会在for循环里面添加点击事件,但是结果和我们所期盼不一样,那么是为什么呢???? 接下来看看我们的

随机推荐