首先,需要引入美化框架,比如 Bootstrap、Semantic UI 等。

然后,在 PHP 中可以使用以下代码生成一个弹窗广告:

<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
  <div class='modal-dialog' role='document'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h4 class='modal-title' id='myModalLabel'>弹窗广告标题</h4>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
      </div>
      <div class='modal-body'>
        <p>弹窗广告内容</p>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-primary'>了解更多</button>
        <button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
      </div>
    </div>
  </div>
</div>

然后,在页面加载时,可以使用以下 JavaScript 代码调用弹窗:

$(document).ready(function(){
    $('#myModal').modal('show');
});

其中,#myModal 为弹窗的 ID,modal('show') 表示显示弹窗。

完整的 PHP 代码如下:

<?php
// 引入 Bootstrap CSS 和 JS 文件
echo '<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>';
echo '<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>';
echo '<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>';

// 弹窗广告代码
echo '<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>';
echo '<div class='modal-dialog' role='document'>';
echo '<div class='modal-content'>';
echo '<div class='modal-header'>';
echo '<h4 class='modal-title' id='myModalLabel'>弹窗广告标题</h4>';
echo '<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>';
echo '</div>';
echo '<div class='modal-body'>';
echo '<p>弹窗广告内容</p>';
echo '</div>';
echo '<div class='modal-footer'>';
echo '<button type='button' class='btn btn-primary'>了解更多</button>';
echo '<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';

// 调用弹窗
echo '<script>';
echo '$(document).ready(function(){';
echo '$('#myModal').modal('show');';
echo '});';
echo '</script>';
?>
PHP 生成美化弹窗广告 - 使用 Bootstrap 框架

原文地址: https://www.cveoy.top/t/topic/mPdy 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录