JavaScript 弹出窗口在 PHP IF 函数中显示，无需 onClick

Question

我正在观看 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 来显示标记的情况下使用相同或类似的函数？

Answer 1

您只需添加内联 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()函数放在脚本标记中(最好在关闭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>