标签： gutenberg

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

纯代码实现WordPress Popup Box – sola博客

WordPress Popup Box插件非常多，可sola想实现一个简单的弹窗，因为我不需要复杂的后台界面和各种功能，本文就介绍一种基于JQuery实现的弹窗，支持shortcode，可以放在wordpress gutenberg编辑器中实用。

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

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();
}