弹出窗口插件Popuptools.js功能三之弹出自定义html教程

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2016-01-13 13:52:20　-　阅:　-　评:0　-　积分:0

摘要：
　　多功能弹出插件Popuptools.js不仅可以弹出图片、弹出视频、还能弹出自定义html代码。这篇文章将介绍两个案例，分别是：类似于快速登录的登录框和点击城市后显示的下拉菜单。两种特效都可通过此插件实现......

上次艺灵分享了一款插件Popuptools.js，并且写了两篇相关的教程文章：jquery教程:多功能弹出窗口特效插件Popuptools.js和jquery制作Popuptools.js插件功能二之弹出视频教程。今天，艺灵将继续写一篇关于此插件使用方法的教程，欢迎小伙伴们前来围观。

前两篇文章分别介绍了弹出图片、弹出视频的使用方法，今天将介绍如何弹出自定义html的方法。

之前艺灵分享过关于弹窗式快速注册的文章，那个特效还不错吧。很多网站都在使用此效果，例如：百度、前公司博大旅游网、现公司窝窝宝、艺灵自己的网站等。好了，不掉人胃口了，接下来进入实战阶段！

一、Popuptools.js插件弹出自定义html

demo演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popuptools.js插件功能三：弹出自定义html</title>
<meta name="Keywords" content="Popuptools.js插件,制作插件,弹出窗口代码,jquery弹出层插件,js点击弹出层,jquery教程" />
<meta name="author" content="艺灵设计，www.yilingsj.com"/>
<link rel="stylesheet" type="text/css" href="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.css"/>
</head>
<body>
<div class="demo-w">
　<h1>Popuptools.js插件功能三：弹出自定义html</h1>
　<p>弹出类型：html<br>弹出特效：show+hide</p>
　<br />
　<br />
　<br />
　<span class="demo-btn1" data-config='{type:"html"}' >点我弹出自定义html</span>
</div>
<div class="pop-gybg " style="display: none;"></div>
　<div class="popup-w demo1" style="display: none;">
<div class="pop-box-w" >
　　　自定义html内容 <!--预留用户内容-->
　　</div>
　<div class="pop-gydel gydel" title="关闭" >×</div>
</div>
<!--引入jquery库。此库版本必须要大于1.7+，如果页面中已引入，可忽略此库-->
<script type="text/javascript" charset="utf-8" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入Popuptools.js插件-->
<script type="text/javascript" charset="utf-8" src="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" ></script>
<script type="text/javascript">
$(function(){
　$('.demo-btn1').Popuptools({
　　pop_parent:".demo1",　　　　　　　　　/*弹出元素的最外层*/
　　pop_on:"pop_on-html",　　　　　　　　　/*预留激活样式*/
　　pop_imgclass:"pop-B-html",　　　　　/*预留弹出(img,embed)时显示的样式名*/
　　del_this:".pop-gydel"　　　　　　/*关闭按钮class*/
　});
});
</script>
</body>
</html>

点击上面的“运行代码”后可在新页面中看到预期的效果，效果截图： Popuptools.js插件功能三之弹出自定义html效果图

你以为他只能做一个弹出窗口吗？

二、Popuptools.js插件变形之下拉菜单

demo2演示

<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<title>Popuptools.js插件功能三变形之下拉菜单特效</title>
　<meta name="Keywords" content="Popuptools.js插件,制作插件,弹出窗口代码,下拉菜单特效,js下拉菜单,鼠标点击显示下拉菜单" />
　<meta name="author" content="艺灵设计，www.yilingsj.com"/>
　<link rel="stylesheet" type="text/css" href="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.css"/>
</head>
<body>
　<div class="demo-w">
　　<h1>Popuptools.js插件功能三变形之下拉菜单特效</h1>
　</div>
　<!--弹出框架开始-->
　<div class="ylsj-search-areaw clearfix">
　　<span class="ylsj-site demo-btn1" id="ylsj-site" data-config='{type:"html"}'>点我弹出下拉菜单，弹出类型：2:html；弹出特效：0.show+hide</span>
　　<div class="ylsj-cityw pop-gyw" id="ylsj-cityw">
　　　<div class="gytab-hd">
　　　　<a id="ylsjc-cityhd_0" class="gh-list  on">省份</a><a id="ylsjc-cityhd_1" class="gh-list">城市</a><a id="ylsjc-cityhd_2" class="gh-list">地区</a>
　　　</div>
　　　<div class="gytab-bdw">
　　　　<div class="gytab-bd">
　　　　　<ul id="ylsjc-city_0" class="gb-list bd-on" style="display:block;">
　　　　　　数据待加载，<br />加载数据教程：<a href="http://www.yilingsj.com/jquery/2015-12-02/347.html" target="_blank" title="jquery ajax实战之从destoon数据库中调取省市县地址库信息">jquery ajax实战之从destoon数据库中调取省市县地址库信息  </a>
　　　　　</ul>
　　　　　<ul id="ylsjc-city_1" class="gb-list " style="display:none;">
　　　　　</ul>
　　　　　<ul id="ylsjc-city_2" class="gb-list" style="display: none;">
　　　　　</ul>
　　　　</div>
　　　</div>
　　　<span class="pop-gydel" title="关闭">×</span>
　　</div>
　</div>
　<!--弹出框架结束-->
　<!--引入jquery库。此库版本必须要大于1.7+，如果页面中已引入，可忽略此库-->
　<script src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8" ></script>
　<!--引入Popuptools.js插件-->
　<script src="http://www.yilingsj.com/skin/yilingsj/demojs/Popuptools/Popuptools.js" type="text/javascript" charset="utf-8"></script>
　<script type="text/javascript">
　　$(function(){
　　　$('.demo-btn1').Popuptools({
　　　　pop_parent:"#ylsj-cityw",　　　/*弹出元素的最外层*/
　　　　pop_bgqp:0,　　　　　　　　　　/*表示半透明背景不全屏，1表示全屏*/
　　　　pop_effect:0,　　　　/*切换类型0:show+hide;1:fadeIn+fadeOut;2:slideDown+slideUp;3:addclass;4.display;*/
　　　　del_this:".pop-gydel"　　　/*关闭按钮class*/
　　　});
　　});
　</script>
</body>
</html>

上面代码展示的效果是这个样子的： Popuptools.js插件变形之下拉菜单效果图

你以为他只能做这些吗？

No!

三、Popuptools.js插件更多功能

还是让艺灵来做一下总结吧！拥有Popuptools.js插件，看官可以实现这些效果：
1.弹出图片：二维码、图片等(5种展示方式+是否显示全屏背景+是否显示标题+是否只有关闭功能)；
2.弹出视频：视频教程、宣传片等(5种展示方式+是否显示全屏背景+是否显示标题+是否只有关闭功能)；
3.弹出自定义html：弹出快速注册登录框、弹出下拉菜单、弹出地址库、弹出收藏夹等(5种展示方式+是否显示全屏背景+是否只有关闭功能)；

全部demo演示

demo演示弹出图片案例猛戳→→→→→
	demo演示弹出视频案例猛戳→→→→→
	demo演示弹出自定义html案例猛戳→→→→→
	demo演示弹出下拉菜单案例猛戳→→→→→

Popuptools.js插件下载

多功能弹出窗口特效插件Popuptools.js　10积分，不喜勿下。

拥有一款插件即可实现多种功能，是不是很强大？！
当然，后期此插件可能还会增加拖拽等功能，欢迎看官使用此插件哦~

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-01-13/357.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！