首先,需要引入美化框架,比如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写一个js弹窗广告使用美化框架

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

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