文章信息:


文章类型:

文章发布日期:

最后修改日期:

文章摘要:


如题,该代码来源于sola博客,原文链接如下: 本站根据自己的实际情况分别相关文件放置在了: 一些使用心得: …

WordPress纯代码实现自定义弹窗|支持多弹窗并存,简码,兼容古登堡

449 Views


如题,该代码来源于sola博客,原文链接如下:

本站根据自己的实际情况分别相关文件放置在了:

  1. 古登堡编辑器全局样式内/任意供插入js/css代码的部分
  2. php部分使用的code snippes插件进行插入
  3. 代码输出部分,使用自定义html添加的按钮

一些使用心得:

(1)该弹窗可以多个同时启用进行

不同地方使用不同弹窗,只需要修改弹窗的序号即可,同时,可以对弹窗的宽度样式进行自定义的调整,使其适应不同使用场景。非常好用,对本站这种不喜欢装那些繁杂的弹窗插件的人来说,很满足了。

(2)弹窗简码的置入

使用古登堡编辑器时,可以中间放很多内容类似,可以这样放入,不用像原文的演示那样全部放在一个简码后:

(3)弹窗的触发

以下这个触发代码,似乎只能使用按钮类型进行触发。因为如果时古登堡区块的话,似乎无法指定 data-modal-target=”#popup-1″ 元素。由于该项对本站来说没有影响,不想再去修改源代码了以适应了,如果有修改好,能够通过其他类型点击进行触发的,请务必发我一份!

<button class="sola-modal-trigger" data-modal-target="#popup-1">打开</button>

以下随附了本站使用的代码,供留存记录。

Js代码放在页脚,css代码随意,我是放在古登堡编辑器样式内部,php代码可以放在function.php内,我是使用code snippes插件来放置的。

<script type="text/javascript">
      jQuery(function($){
        const $overlay = $('<div class="sola-modal-overlay hidden">');
        const closeBtn = '<a class="sola-modal-close">×</a>';
        
        $overlay.appendTo('body');
        $('body').on('click','.sola-modal-trigger',openModal);
        $('body').on('click', '.sola-modal-close,sola-modal-overlay', closeModal);
        $('body').on('click', '.sola-modal-overlay', closeAllModals);
        
        function openModal(){
          const target = $(this).data('modal-target');
    
          if( target && $(target).length ){
            const $target = $(target);
    
            // Add close btn
            if( ! $target.find('sola-modal-close').length ){
              $(closeBtn).appendTo($target);
            }
            
            // Set custom width
            const modalCustomWidth = $target.data('modal-width');
            if( modalCustomWidth ){
              $target.css('width',modalCustomWidth);
            }
            
            // Open
            $target.removeClass('hidden');
            $overlay.removeClass('hidden');
          }   
        }
        
        function closeModal(){
    
          if( $('.sola-modal:not(.hidden)').length == 1 ){
            $overlay.addClass('hidden');
          }
    
          $(this).closest('.sola-modal').addClass('hidden');   
          
        }
        
        function closeAllModals(){
          $('.sola-modal').addClass('hidden');
          $overlay.addClass('hidden');
        }
      });
    </script>
/*添加一个弹窗*/
.sola-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: none !important;
  }
  .hidden {
    display: none;
  }
  .sola-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    max-width:100%;
    max-height:100vh;
    background-color: white;
    padding: 3rem;
    border-radius: 5px;
    box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 99999;
    overflow-y:auto;
  }

  .sola-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9999;
  }
//添加弹窗主体
add_shortcode( 'sola-popup', 'sola_popup_handler');
function sola_popup_handler( $atts, $content ){
  $atts = shortcode_atts( array(
    'width' => '',
    'id' => '',
  ), $atts );
  extract($atts);
  ob_start();?>

  <div class="sola-modal hidden" data-modal-width="<?php echo $width;?>" id="<?php echo $id;?>">
    <a class="sola-modal-close">×</a>
    <?php echo apply_filters('the_content',$content);?>
  </div>
  <?php
  return ob_get_clean();
}

网站文章分类及页面


格言警句