给网站添加一个漂亮的公告弹窗

管理员
管理员
管理员
238
文章
18
评论
2020年5月16日13:26:46 3 2,903 6121字
给网站添加一个漂亮的公告弹窗

用户未登录

给网站添加一个漂亮的公告弹窗

用户已登录

简单好看到爆炸,一天只弹一次,使用cookie记录;可以插入到自己网站,做一个弹窗广告或者说弹窗公告把网页的css资源引入到站点,再把BODY里面的内容粘贴到网站就做成了;效果源码是在网站扒的,做了一个简单的HTML文件,不想做个多修改的可以直接引用文件,只要简单修改一下文字内容即可。

下面内容是适配了鸟叔的begin主题的文件,并修改了后台框架添加了几项设置项;可以看一下

先贴样式:

/*弹窗广告样式*/
#globalAd {
	max-width: 600px;
    width: 100%;
	flex-basis: 100%;
	margin: 0 auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 30px rgba(0, 0, 0, .4);
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .4);
	overflow: hidden;
	position: fixed;
	display: none;
	z-index: 9999999999;
}

.layer {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	filter: alpha(opacity=50);
	opacity: .6;
	background: #000;
	z-index: 9999999998;
	display: none;
}

#globalAd #hero-img {
	width: 100%;
	height: 100px;
	background: #007bff;
}

#globalAd #profile-img {
	width: 80px;
	height: 80px;
	margin: -60px 0 0 40px;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 1px 1px 10px 0 rgba(0,90,90,.3);
}

#globalAd #profile-img img {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
}

#globalAd #pttcontent {
	width: 80%;
	margin: 0 auto;
	padding: 0 0 20px;
    text-align: center;
}

#globalAd #pttcontent h1 {
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    top: 60px;
    margin-left: 4em;
    color: #fff;
}

#globalAd #pttcontent .title {
    padding: 10px;
    font-weight: 400;
    text-align: left;
}

#globalAd #pttcontent .pttcontent {
    padding: 10px 10px 20px 40px;
    line-height: 22px;
    font-weight: 300;
    text-align: left;
}

#globalAd #pttcontent a {
	color: #ccc;
	font-size: 14px;
	margin: 0 10px;
	transition: color .3s ease-in-out;
	-webkit-transition: color .3s ease-in-out;
}

#globalAd #pttcontent a:hover {
	color: #007bff
}

#globalAd #pttcontent .btn {
	background: none repeat scroll 0 0 #1ba1e2;
	border: 0;
	border-radius: 10px;
	color: #fff!important;
	cursor: pointer;
	font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;
	font-size: 14px;
	padding: 6px 10%;
}

#globalAd #pttcontent .btn:hover,
.yanshibtn:hover {
	background: none repeat scroll 0 0 #59b68b;
	border: 0;
	border-radius: 10px;
	color: #fff!important;
	cursor: pointer;
	font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif;
	font-size: 14px;
	padding: 8px 10%;
}

上面样式添加到主题的style.css文件最后;接下来打开footer.php文件添加下面代码:

内容查看此隐藏内容查看价格为3元,请先
1、本站所有内容归原作者所有,与本站无关
2、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者同意,注明来源
3、本站大部分资源来源码于网络,仅供学习交流使用,本站不提供任何技术支持,不作任何安全承诺,是否使用请自行判断
4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其完整性负责
5、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
6、本站管理员和工作人员有权不事先通知发贴者而删除本文,本站客服Email:service@teelm.com
代码添加到footer.php文件的<?php wp_footer(); ?>前面就好;最后向后台主题选项添加功能,代码为:

	$options[] = array(
		'name' => '',
		'desc' => '启用弹窗通知',
		'id' => 'layer_open',
		'std' => '0',
		'type' => 'checkbox'
	);

	$options[] = array(
		'name' => '',
		'desc' => '弹窗通知标题',
		'id' => 'layer_title',
        "std" => "这是一个弹窗标题",
		'type' => 'text'
	);

	$options[] = array(
		'name' => '',
		'desc' => '弹窗通知内容',
		'id' => 'layer_content',
		'std' => '你知道吗?亲!<br>我们此后的征途是星辰大海 ^_^',
		'type' => 'textarea'
	);

	$options[] = array(
		'name' => '',
		'desc' => '弹窗通知内容链接地址',
		'id' => 'layer_contentlink',
		'std' => 'https://www.teelm.com/',
		'type' => 'text'
	);

	$options[] = array(
		'id' => 'clear'
	);

添加在哪里看各位自己的想法,我是单独开了一个选项放里面的;做到这里基本就好了,如果有一些样式错乱请自行调整哈;记得在后台主题选项里要保存一下哈。

该文收费内容适配的是知更鸟的Begin主题,其他主题需要做相应的修改,购买请谨慎,如购买可联系,本站提供有偿修改
资源下载
免费资源
下载链接点击下载(fudm)复制
1、本站所有内容归原作者所有,与本站无关
2、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者同意
3、本站大部分资源来源码于网络,仅供学习交流使用,本站不提供任何技术支持,不作任何安全承诺,是否使用请自行判断
4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其完整性负责
5、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
6、本站管理员和工作人员有权不事先通知发贴者而删除本文,本站客服Email:service@teelm.com
weinxin
扫码关注微信公众
幂彀社区,一个关注互联网、平面设计等领域个人博客;致力于打造一个优秀的资源共享学习平台。
管理员
  • 本文由 发表于 2020年5月16日13:26:46
  • 转载请务必保留本文链接:https://www.teelm.com/2020/05/16/14774.html