微信小程序设计开发_纯js的右下角弹窗实例

  • 栏目:公司新闻 时间:2021-01-12 13:04 分享新闻到:
<返回列表

纯js的右下角弹窗实例     投稿:jingxian   下面小编就为大家带来一篇纯js的右下角弹窗实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这个弹窗是如下图的效果:

打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个 times;会淡出。

采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事。如果采用窗口自下而上地移动,还要考虑div的position设置问题,这个问题还涉及一系列兼容性问题,很严重。

之所以称之为纯js的右下角弹窗,是因为,在任意页面,只需要如下引入Jquery之后,再引入这个Js,则可以使用,唯一注意就是Jquery的引入一定要在这个Js之前,由于我的JS是全基于Jquery写成的。没Jquery支持可不行。

 !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "TR/html4/loose.dtd" 
 html 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 title 消息提醒 /title 
 script src="jquery-1.8.3.js" type="text/javascript" /script 
 script src="notice_pop.js" type="text/javascript" /script 
 /head 
 body 
 /body 
 /html 

这个弹窗的Js代码notice_pop.js如下:

function pop_init(title,content) {
 //取当前浏览器窗口大小
 var windowWidth=$(document).width();
 var windowHeight=$(document).height();
 //弹窗的大小
 var weight=320;
 var height=240;
 $("body").append(
 " div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowHeight-height-10)+"px;left:"+(windowWidth-weight-10)+"px' "+
 " div " +
 " div b "+title+" /b /div div b × /b /div " +
 " div /div "+
 " /div " +
 " div id='content' " +
 content+
 " /div "+
 " /div "
function pop_close(){
 $('#pop_div').fadeOut(400);
$(document).ready(function(){
 pop_init("公告信息"," ul li sss /li li sss /li /ul 
 $('#pop_div').fadeIn(400);
});

说是Jquery其实更多是HTML的内容,关键是设置div的position为absolute,加个灰色的1px的边框给它,在zindex上面设置为最高,之后安排在 浏览器高度/宽度-其大小的位置,再摆到右下角。

在其里面的标题子面板,放两个float的div,一个在左,一个在右,以实现弹框标题和关闭按钮,分居两侧的效果,再用clear:both清请这个float。给下面的内容让路。

以上这篇纯js的右下角弹窗实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


分享新闻到:

更多阅读

微信小程序设计开发_纯js的右下角弹窗实

公司新闻 2021-01-12
纯js的右下方弹出窗口案例 文章投稿:jingxian 下边网编就为大伙儿产生一篇纯js的右下方...
查看全文

五金磨具商品网站-黔东南企业网站建设

公司新闻 2021-01-12
很多年黔西南公司网站制作工作经验,打造出制造行业顶级检索模块总流量,技术专业订制企...
查看全文

郑州网站建设价格-浅谈企业网站建设怎样

公司新闻 2021-01-12
针对企业网站建设来讲,即便作出来的实际效果十分酷炫,可是假如客户不买账,那麼那...
查看全文
返回全部新闻


区域站点: 南丰县如何建立微信小程序   南宫市自己搭建服务器   囊谦县建立网站   南和县自助建站免费建站平台   南华县如何建立微信小程序   南江县自己搭建服务器   南京市建立网站   南靖县自助建站免费建站平台   南康市如何建立微信小程序   南乐县自己搭建服务器   南陵县建立网站   南宁市自助建站免费建站平台   南平市如何建立微信小程序   南皮县自己搭建服务器   南市区建立网站   南通市自助建站免费建站平台   南投县如何建立微信小程序   南雄市自己搭建服务器   南溪县建立网站   南阳市自助建站免费建站平台   南漳县如何建立微信小程序   南召县自己搭建服务器   南郑县建立网站   那坡县自助建站免费建站平台   那曲县如何建立微信小程序   纳雍县自己搭建服务器   讷河市建立网站   内黄县自助建站免费建站平台   内江市如何建立微信小程序   内丘县自己搭建服务器   内乡县建立网站   嫩江市自助建站免费建站平台   聂荣县如何建立微信小程序   尼玛县自己搭建服务器   尼木县建立网站   宁安市自助建站免费建站平台   宁波市如何建立微信小程序   宁城县自己搭建服务器   宁德市建立网站   宁都县自助建站免费建站平台   宁国市如何建立微信小程序   宁海县自己搭建服务器   宁化县建立网站   宁晋县自助建站免费建站平台   宁陵县如何建立微信小程序   宁明县自己搭建服务器   宁南县建立网站   宁强县自助建站免费建站平台   宁陕县如何建立微信小程序   宁武县自己搭建服务器   宁乡市建立网站   宁阳县自助建站免费建站平台   宁远县如何建立微信小程序   农安县自己搭建服务器   磐安县建立网站   盘锦市自助建站免费建站平台   盘山县如何建立微信小程序   磐石市自己搭建服务器   盘州市建立网站   蓬安县自助建站免费建站平台   澎湖县如何建立微信小程序   蓬莱市自己搭建服务器   彭山县建立网站   蓬溪县自助建站免费建站平台   彭阳县如何建立微信小程序   彭泽县自己搭建服务器   彭州市建立网站   偏关县自助建站免费建站平台   平安县如何建立微信小程序   平昌县自己搭建服务器   平定县建立网站   屏东县自助建站免费建站平台   平度市如何建立微信小程序   平果县自己搭建服务器   平和县建立网站   平湖市自助建站免费建站平台   平江县如何建立微信小程序   平乐县自己搭建服务器   平凉市建立网站   平利县自助建站免费建站平台   平罗县如何建立微信小程序   平陆县自己搭建服务器   屏南县建立网站   平泉市自助建站免费建站平台   屏山县如何建立微信小程序   平顺县自己搭建服务器   平塘县建立网站   平潭县自助建站免费建站平台   平武县如何建立微信小程序   萍乡市自己搭建服务器   平乡县建立网站   平阳县自助建站免费建站平台   平遥县如何建立微信小程序   平阴县自己搭建服务器   平邑县建立网站   平远县自助建站免费建站平台   平舆县如何建立微信小程序   皮山县自己搭建服务器   普安县建立网站   浦北县自助建站免费建站平台   浦城县如何建立微信小程序   普洱市自己搭建服务器   普格县建立网站   浦江县自助建站免费建站平台   普兰县如何建立微信小程序   普宁市自己搭建服务器   莆田市建立网站   迁安市自助建站免费建站平台   乾安县如何建立微信小程序   潜江市自己搭建服务器   潜山市建立网站  

友情链接: 自助免费建站 快速建站 360免费建站永久免 自助建站 手机版

Copyright © 2002-2020 建立网站_自助建站免费建站平台_如何建立微信小程序_自己搭建服务器_网站建设空间 版权所有 (网站地图) 备案号:粤ICP备10235580号