首先先搭写一个基本的格式： $.fn.popImg = function() {//your code goes here }然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递到插件内部，如下： ;(function($,window,document,undefined){$.fn.popImg = function() {//your code goes here} })(jQuery,window,document);那么接下来我们就在里面实现点击文章图片弹出该图片并放大的效果。 整体代码如下： ;(function($,window,document,undefined){$.fn.popImg =...
本文实例讲述了JS实现的添加弹出层并完成锁屏操作。分享给大家供大家参考，具体如下： 上图：代码： <html> <head><title>弹出层</title><style type="text/css">*{padding:0px;margin:0px;}.up{width:500px;height: 400px;border:1px solid silver;position: absolute;display: none;z-index: 9999;background:#fff; /* top:50%;left: 50%;*/ /* margin-left: -250px;margin-top: -200px;*/}.up h2{background-color: #f2f2f2...
在移动web开发中和pc端不同的是，手机的输入是软键盘，这样就会有个问题，那就是当有输入的时候，键盘弹起来，整个页面难免会发生变化 1、页面提高背景会出现不够用的现象， 解决方法，在body中设置背景图，即便是页面抬升了，背景也依旧存在， 2、底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升，遮盖住相应的页面，这个有两种解决方法 一、是页面页相应的提高，页面变化多少我们让上面的页面滚动多少， $(input).b...
废话不多说了，直接给大家贴代码了，具体代码如下所示： <span style="white-space:pre"> </span>var i=0;//记录次数 var timer;//定时器id //设置弹出广告 onload=function(){ //间隔四秒展示一次广告 timer = setInterval(showAd,4000); } //展示2秒以后隐藏广告的方法 function showAd(){ i++;//展示的次数加1 //若i等于3清空由setInterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var divObj = documen...
可能这个标题起得不够恰当，简单来说就是：当鼠标移到最左侧时，移出一个框。 首先，我们用两个div来简单布局以下页面： <div id="box"><div id="share">分享到</div> </div>这个分享框的弹出原理是：把内层div定位到外层div最右侧紧贴，然后把外层div定位到屏幕左外测，left的值与宽度相等，刚好隐藏掉就可以。当鼠标经过时，再通过改变left的值使外层div显示出来。 <script type="text/javascript">window.onload=function(){va...
本文实例为大家分享了js弹出窗口展示的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>body{/*margin: 0;*/}#div1{width: 100px;height: 100px;border: 1px solid red;}</style> </head> <body> <div id="div1" onmouseover="getInfo(this)" onmouseout="this.innerHTML="></div> <button onclick="getInfo()">获取div信息</button><hr/> <a href="111....
layer至今仍作为layui的代表作，她的受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。在贴出代码 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常...
今天讲了Jquery的弹出窗口的组成和用法： 先把引用文件的代码写好： // 每个弹窗的标识 var x =0;var idzt = new Array();var Window = function(config){//ID不重复idzt[x] = "zhuti"+x; //弹窗ID//初始化，接收参数this.config = {width : config.width || 300, //宽度height : config.height || 200, //高度buttons : config.buttons || , //默认无按钮title : config.title || 标题, //标题content : config.content || 内容, ...
本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。 功能说明多层弹出时，只有一个背景层。 弹出层嵌入内部组件。 弹出层按钮支持回调 源码下载实现多层弹出时，只有一个背景层利用两个组件实现，一个背景层组件（只提供一个背景层，组件名：background.vue），一个弹出层内容管理组件（实现多个内容层的管理，组件名：master.vue)。 弹出层嵌入内部组件 使用vue的component组件实现...
1. 在layer弹窗组件中 如果使用了flash播放器，全屏是正常的 但若使用了HTML5的播放器，全屏失效 举个栗子 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script><script src="layer/layer.js"></script><style></style> </head> <body> <h1>我是字</h1> <div id="box"> <video id="video" controls preload="auto" width="400...
本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码，供大家参考，具体内容如下 看到网上一位大神的代码后，大概进行了注释，调试了一下页面以后感觉不错，留作以后使用。 主要用到了：/jquery-1.10.2.min.js 代码如下：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>遮罩弹出窗口</title> <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></...
本文实例为大家分享了jQuery实现弹出对话框的具体实现代码，供大家参考，具体内容如下 首先，这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js，还有一个jquery.XYTipsWindow.2.8.css话不多说，这里直接上代码，留着以后备用。<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <!--使用对画框需要的两个js--> <script type="text/java...
这款弹出框插件是本人自己模仿IOS原生弹出框写的一个自定义插件，包括Alert弹出框和Confirm确认框，支持标题，内容，按钮文字以及按钮回调函数自定义，使用非常简单，可以进行扩展，下面是插件使用方法，一看就懂： 首先导入jquery库和插件库以及css文件 <script src="./jquery-1.8.3.min.js"></script> <script src="./jquery.confirm-1.1.js"></script> <link href="./jquery.confirm-1.1.css" rel="external nofollow" rel=styl...
如图所示，点击新增，弹出如图的弹出框，点击取消不保存页面信息，点击确定保存页面信息 在前台页面添加一个标签，任何都可以 <div class="btn btn-default" id="divadd">新增</div> 写弹出框页面 <div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: #8FB0D1; -moz-opacity: 0.8; opacity: 0.8; z-index: 1001; filter: alpha(opacity=40); backgr...
废话不多说了，具体代码如下所示： <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"/> <script type="text/javascript" src="${ctx}/res/js/ztree/js/jquery.ztree.core-3.5.js"></script> <input onclick="showMenu();return false;"/> var setting = { view: { dblClickExpand: false...