给你的typecho主题中添加一个弹窗功能

寻梦xunm| 567| 休闲

11个月前

超过349天温馨提示

本文最后更新于2023年12月10日，已超过349天没有更新，若内容或图片失效，请留言反馈。

css代码：

.xm-tanchuang-content *,
.xm-tanchuang-content *::before,
.xm-tanchuang-content *::after {
  box-sizing: inherit;
}
.xm-tanchuang-close {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0 0 0 / 85%);
  z-index: 999999998;
}
.xm-tanchuang-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  max-width: 480px;
  max-height: 90vh;
  text-align: center;
  font-size: 100%;
  color: white;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 999999999;
}
.xm-tanchuang-content p {
  margin: 0.5em 0;
  padding: 0 1em;
  font-size: 1.2em;
}
.xm-tanchuang-content img {
  width: auto;
  height: auto;
  max-width: 480px;
  max-height: calc(90vh - 5em);
  border: none;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.xm-tanchuang-content img:hover {
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
  transform: scale(1.02);
}
.xm-tanchuang-content a {
  color: orange;
  text-decoration: none;
}
.xm-tanchuang-content a:hover {
  color: white;
  outline-width: 0;
}
@media screen and (max-width: 640px) {
  .xm-tanchuang-content {
    justify-content: flex-start;
    top: calc(50% - 50px);
    width: calc(100% - 1em);
    max-height: calc(50vh + 5em);
  }
  .xm-tanchuang-content img {
    max-width: calc(100vw - 2em);
    max-height: 50vh;
  }
}

把以下代码中添加到“header.php”或者“footer.php”文件中

<?php if(isset($_COOKIE['xm-tanchuang']) == false || $_COOKIE['xm-tanchuang'] == '' || $_COOKIE['xm-tanchuang'] == null){if ( $this->options->tanchuangimg || $this->options->tanchuangtitle){ ?>

<div class="xm-tanchuang-content" id="xm-tanchuang-content">
<?php if ($this->options->tanchuangimg): ?>
<?php $this->options->tanchuangimg() ?>
<?php endif; ?>
<?php if ($this->options->tanchuangtitle): ?>
    <p>
        <?php $this->options->tanchuangtitle() ?>
    </p>
    <?php endif; ?>
</div>
<div class="xm-tanchuang-close" id="xm-tanchuang-close" onclick="checkCookie(<?php $this->options->tanchuangtime(); ?>)"></div>

<?php } } ?>

把下面的代码添加到“functions.php”文件中

$tanchuangtime = new \Typecho\Widget\Helper\Form\Element\Text(
    'tanchuangtime',
    null,
    null,
    _t('弹窗时间'),
    _t('自定义弹窗时间，关闭后多久内不在显示')
);

$form->addInput($tanchuangtime);


$tanchuangimg = new \Typecho\Widget\Helper\Form\Element\Text(
    'tanchuangimg',
    null,
    null,
    _t('弹窗图片'),
    _t('自定义弹窗图片，可以和弹窗标题组合为图文弹窗，格式如下：&lt;a href="网址地址" target="_blank">&lt;img src="图片地址">&lt;/a>')
);

$form->addInput($tanchuangimg);


$tanchuangtitle = new \Typecho\Widget\Helper\Form\Element\Text(
    'tanchuangtitle',
    null,
    null,
    _t('弹窗标题'),
    _t('自定义弹窗标题，可以和弹窗图片组合为图文弹窗，格式如下：&lt;a href="网址地址" target="_blank">自定义标题&lt;/a>')
);

$form->addInput($tanchuangtitle);

把下面的js代码添加到你主题中

//弹窗
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 60 * 1000));
document.cookie = cname + "=" + cvalue + ";expires=" + d.toGMTString() + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
function checkCookie(time) {
if (time == null){
time = 720 ;
}
document.getElementById('xm-tanchuang-content').style.display = 'none';
document.getElementById('xm-tanchuang-close').style.display = 'none';
setCookie('xm-tanchuang',true,time);
}

var user = getCookie("xm-tanchuang");
if (user != "") {
document.getElementById('xm-tanchuang-content').style.display = 'none';
document.getElementById('xm-tanchuang-close').style.display = 'none';
} else {
document.getElementById('xm-tanchuang-content').style.display = 'flex';
document.getElementById('xm-tanchuang-close').style.display = 'block';
}

文章中的代码来源于：http://www.lopwon.com/lopwon-pop.html

typecho 教程 php html js 代码弹窗

0 赞 or 打赏

喜欢就打赏一点