JavaScript弹出窗口显示在PHP IF函数没有onClick - JavaScript Popup window display inside PHP IF Function without onClick

我正在YouTube上学习如何在点击按钮后显示弹出框。这是相当简单的，但现在我想扭转一下。我想在PHP IF函数中显示标记。

我相信创建一个JavaScript函数将是要遵循的道路，但我不精通JavaScript/jQuery，因为我现在才开始使用它。如果我的PHP IF函数等于TRUE

，我想显示以下标记

 <div id="popup-box" class="popup-position">
    <div class="popup-wrapper"> <!-- move away from screen and center popup -->
        <div class="container"> <!-- backgorund of pop up -->
            <h2>Pop box<h2>
            <p><a href="javascript:void(0)">Close popup</a></p>
        </div>
    </div>
  </div>

下面的JavaScript函数在我所遵循的教程中使用。当它被onClick触发时，它会完美地工作。

<script>
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>

我有以下PHP脚本

function cart($userEmailAdd){
    global $dbc; // database connection variable
    /* 
     Verify if the product that is being added already exists in the cart_product table.
     Should it exist in the cart then display popup box with an appropriate 
     message. 
     Otherwise, add the product to cart_product
    */
    if(isset($_GET['cart'])){
    $productID = $_GET['cart'];
        $queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND  cpProductid = '$productID'"; 
        $executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
        if(mysqli_num_rows($executeCheckCart) > 0 ){
        /* IF MYSQLI_NUM_ROWS is greater than zero then 
        it means that the product already exists in the cart_product table. 
        Then display following markup*/
            ?>
            <div id="popup-box" class="popup-position">
                <div class="popup-wrapper"> <!-- move away from screen and center popup -->
                    <div class="container"> <!-- backgorund of pop up -->
                        <h2>Pop box<h2>
                        <p><a href="javascript:void(0)">X</a></p>
                    </div>
                </div>
            </div> <!-- -->
            <?php 
        } else {
            $query = "INSERT INTO cart..." ;
            // rest of script continues after this for insertion of the product

我如何去使用相同的功能或类似的一个不使用onClick来显示标记?

你可以添加内联CSS display:block，这样当页面加载时默认显示弹出窗口

<div id="popup-box" style="display:block" class="popup-position">

然后编辑弹出窗口的关闭按钮，告诉他调用toglle_visibility() onclick

<p><a href="javascript:toogle_visibility('popup-box')">X</a></p>

当然你需要把toggle_visibility()函数放在script标签中(最好在结束body元素之前)

<script>
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>

你可以做类似的事情:

function cart($userEmailAdd){
global $dbc; // database connection variable
/* 
 Verify if the product that is being added already exists in the cart_product table.
 Should it exist in the cart then display popup box with an appropriate 
 message. 
 Otherwise, add the product to cart_product
*/
if(isset($_GET['cart'])){
$productID = $_GET['cart'];
    $queryCheckCart = "SELECT * from cart_product WHERE emailOfCustomer = '$userEmailAdd' AND  cpProductid = '$productID'"; 
    $executeCheckCart = mysqli_query($dbc, $queryCheckCart) or die (mysqli_error($dbc));
    if(mysqli_num_rows($executeCheckCart) > 0 ){
    /* IF MYSQLI_NUM_ROWS is greater than zero then 
    it means that the product already exists in the cart_product table. 
    Then display following markup*/
        ?>
         <script>
            $(document).ready(function(){
                toggle_visibility('popup-box');
            });
        </script>
        <div id="popup-box" class="popup-position">
            <div class="popup-wrapper"> <!-- move away from screen and center popup -->
                <div class="container"> <!-- backgorund of pop up -->
                    <h2>Pop box<h2>
                    <p><a href="javascript:void(0)">X</a></p>
                </div>
            </div>
        </div> <!-- -->
        <?php 
    } else {
        $query = "INSERT INTO cart..." ;
        // rest of script continues after this for insertion of the product

你所要做的就是告诉javascript它必须打开弹出窗口。这里，我让Javascript在文档加载后运行函数toggle_visibility('popup-box');。

popupdiv不一定要在php的IF语句中。在<body>元素中可以使用onLoad="toggle_visibility('popup-box')"属性代替$(document).ready(function(){ });。

您可以使用一个简单的布尔变量来指示是否显示弹出窗口，而不是在php if子句中执行html块:

$showPopup = false;
if(mysqli_num_rows($executeCheckCart) > 0 ){
    /* IF MYSQLI_NUM_ROWS is greater than zero then 
    it means that the product already exists in the cart_product table. 
    Then display following markup*/
    $showPopup = true;
 ?>
 <?php 
} else {

然后在你的html代码中，你可以根据$showPopup的设置来显示弹出窗口:

<div id="popup-box" <?php echo ($showPopup === false)? 'style="display:none"' : '' ?> class="popup-position">
</div>