分享个网站首页弹窗代码

效果图：

带透明半遮罩效果，有关闭按钮，很不错，能自定义自己的广告标题和内容。

代码如下：

<html>
<head>
<style>
/* defaults */
/* =============================================== */html {font-size: 62.5%;
}body {--light: hsl(0, 0%, 100%);--background: linear-gradient(to right bottom, hsl(236, 50%, 50%), hsl(195, 50%, 50%));display: flex;flex-direction: column;justify-content: center;align-items: center;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', sans-serif;min-height: 100vh;background: linear-gradient(to bottom, hsl(236, 50%, 98%), hsl(236, 50%, 94%));
}a,
a:link {font-family: inherit;text-decoration: none;
}/* modal */
/* =============================================== */
.modal-container {position: fixed;top: 0;left: 0;z-index: 10;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: hsla(0, 0%, 40%, .6);
}/* using :target */
.modal-container:target {display: flex;
}.modal {
width: 60rem;padding: 4rem 2rem;border-radius: .8rem;color: var(--light);background: var(--background);box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);position: relative;overflow: hidden;
}.modal__details {text-align: center;margin-bottom: 4rem;padding-bottom: 4rem;border-bottom: 1px solid hsla(0, 0%, 100%, .4);
}.modal__title {font-size: 3.2rem;
}.modal__description {margin-top: 2rem;font-size: 1.6rem;font-style: italic;
}.modal__text {padding: 0 4rem;margin-bottom: 4rem;font-size: 1.6rem;line-height: 2;
}.modal__text::before {content: '';position: absolute;top: 0%;left: 100%;transform: translate(-50%, -50%);width: 18rem;height: 18rem;border: 1px solid hsla(0, 0%, 100%, .2);border-radius: 100rem;pointer-events: none;
}.modal__btn {padding: 1rem 1.6rem;border: 1px solid hsla(0, 0%, 100%, .4);border-radius: 100rem;color: inherit;background: transparent;font-size: 1.4rem;font-family: inherit;letter-spacing: .2rem;transition: .2s;cursor: pointer;
}.modal__btn:hover,
.modal__btn:focus {border-color: hsla(0, 0%, 100%, .6);transform: translateY(-.2rem);
}/* links */
/* =============================================== */
.link-1 {font-size: 1.8rem;color: var(--light);background: var(--background);box-shadow: .4rem .4rem 2.4rem .2rem hsla(236, 50%, 50%, 0.3);border-radius: 100rem;padding: 1.4rem 3.2rem;transition: .2s;
}.link-1:hover,
.link-1:focus {transform: translateY(-.2rem);box-shadow: 0 0 4.4rem .2rem hsla(236, 50%, 50%, 0.4);
}.link-2 {width: 4rem;height: 4rem;border: 1px solid hsla(0, 0%, 100%, .4);border-radius: 100rem;color: inherit;font-size: 2.2rem;position: absolute;top: 2rem;right: 2rem;display: flex;justify-content: center;align-items: center;transition: .2s;
}.link-2::before {content: '×';transform: translateY(-.1rem);
}.link-2:hover,
.link-2:focus {border-color: hsla(0, 0%, 100%, .6);transform: translateY(-.2rem);
}/* Second Version Link */
/* =============================================== */
.second-version-link,
.second-version-link:link {color: hsl(236, 50%, 50%);padding: .8rem 1.6rem .8rem .2rem;border-bottom: 2px solid hsl(236, 50%, 50%);font-size: 1.4rem;font-weight: bold;position: absolute;top: 4rem;right: 4rem;
}.second-version-link::after {content: '\2197';position: absolute;top: 0;right: 0;font-size: .9em;
}.abs-site-link {position: fixed;bottom: 20px;left: 20px;color: hsla(0, 0%, 0%, .6);font-size: 1.6rem;
}
</style>
</head>
<body>
<div class="modal-container" id="modal-opened" style="display: none" ><div class="modal"><div class="modal__details"><h1 class="modal__title">Modal Title</h1><p class="modal__description">Sentence that will tell user what this modal is for or something.</p></div><p class="modal__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis ex dicta maiores libero minus obcaecati iste optio, eius labore repellendus.</p><button class="modal__btn">Button &rarr;</button><a href="#modal-closed" onclick="closs()" class="link-2"></a></div>
</div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>open();function closs(){$("#modal-opened").hide();}function open() {$("#modal-opened").show();}
</script>
</body>
</html>

分享个网站首页弹窗代码相关推荐

验证站点怎么添加网站首页html代码,百度站长平台添加站点通过验证图文详解教程...
站长平台为站点提供三种验证方式:文件验证.html标签验证.CNAME验证.最为常见的就是文件验证,也是比较简单方便的一种方法. 1.文件验证 (1)登录百度站长平台--点击站点管理--点击添加网站 ...
传奇玩家访问网站自动弹窗加QQ群方法以及详细代码
大家一定发现访问很多正在商业开区的大服网站时会弹窗让你加QQ群,不仅显得高大上同时也用广告费赚回了人气,在自己的群里养人,很大程度上省下了广告费和提高了人气,可谓开服必备手段之一,今天给大家分享一下网 ...
织梦dedecms 仿制目标网站首页
1.打开目标网站,右键,网页另存为.将目标网站的图片,css,js保存下来. 2.在织梦程序templets文件夹下新建一个模板文件夹,命名为muban,在muban文件夹下面分别建立style,js ...
首页轮转html代码,js制作网站首页图片轮播特效代码
本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下图片轮播 .warp{ width: 600px; height: 750px; position: re ...
html自动弹出公告代码,一段访问网站自动弹窗的js代码
3.5 (4) 今天,有个Q群问如何实现用户访问网站,自动,作为一个扒站魔改主题的站长,emmm,小菜一碟. 在进入正文前,说下js的来历.之前,有个访客在我网站留言,问如何实现用户开启广告屏蔽插件, ...
php代码怎么复制_PHP_PHP网站备份程序代码分享，效果图:PHP代码复制代码代码 - phpStudy...
PHP网站备份程序代码分享效果图: PHP代码复制代码代码如下: 网站程序备份 error_reporting(E_ALL & ~E_NOTICE); ini_set('memory_l ...
网站首页head区代码规范
head区是指首页HTML代码的<head>和</head>之间的内容. 1.公司版权注释 <!- The site is designed by Maketown,In ...
学成在线网站首页_分享一些好用的网站
前言这两年收藏了不少网站,特地整理一下,把一些大家都可能用得上的分享出来,希望能对你有用. 考虑到有一些网站大多数人都知道,所以我就不列出来了. 我把这些网站分为了几大类: 工具类素材类社区类 ...
网站首页js幻灯片代码
JS图片幻灯片,网站首页专用的图片特效代码,旅游网站用着最合适了,支持图片说明,每一幅图片都可以加标题和简短的文字介绍,右下角有图片切换控制按钮,示例中仅有5张图片,不过在实际应用中,你可以添加更多的 ...
dede网站首页被黑攻击植入恶意跳转代码怎么办? 首页经常被篡改标题关键字的解决方法
网站title被加入代码: 首先,我们要先修复首页代码,解决跳转问题,避免更多用户跳转到恶意页面,也是避免网站被篡改后的tdk被搜索引擎收录! 然后我们先解决对方通过自定义宏标记和智能标记向导来篡改首 ...

分享个网站首页弹窗代码

分享个网站首页弹窗代码相关推荐

最新文章

热门文章