纯代码实现WordPress Popup Box

最后更新于 2021 年 10 月 24 日

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

WordPress Popup Box前端代码

首先，可以看以下这个codepen的演示。下面所有代码放进子主题的functions.php中即可。

CSS部分

add_action( 'wp_print_styles', function(){
?>
<style>
  .sola-modal-close {
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    font-size: 5rem;
    color: #333;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: none !important;
  }
  .hidden {
    display: none;
  }
  .sola-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width:100%;
    max-height:100vh;
    background-color: white;
    padding: 6rem;
    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;
  }
</style>
<?php
});

JavaScript部分

add_action( 'wp_print_footer_scripts', function(){
?>
<script>
  jQuery(function($){
    const $overlay = $('<div class="sola-modal-overlay hidden">');
    const closeBtn = '<a class="sola-modal-close">&times;</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>
<?php
});

PHP部分

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">&times;</a>
    <?php echo apply_filters('the_content',$content);?>
  </div>
  <?php
  return ob_get_clean();
}

在WordPress编辑器中使用

用shortcode定义弹窗内容

[sola-popup id="popup-1" width="500px"]你的内容，支持html格式[/sola-popup]

输出弹窗触发按钮。

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

前台效果