Two DIVs opening the same popup

Question

Two DIVs opening the same popup

Navigation

#1 by (0 votes)

0

I have two DIVs to open a specific popup, each. As pictured below:

BelowistheHTMLthatmountsthetwoDIVs.

<?php//Sessãoaindanãoiniciadaouusuárioinválidoif((!isset($_SESSION['usuario']))or($_SESSION['usuario']=='')){?><!--Divdeloginoucadastro--><divclass="col-md-3 col-sm-3">
        <!-- Botão do login -->
        <div class="btn-cart-md">

            <a class="cart-link" href="#">
                <!-- Image -->
                <img class="img-responsive" src="img/user.png" alt="" />
                <!-- Heading -->
                <h4>Olá!</h4>
                <span>Entre ou cadastre-se.</span>
                <div class="clearfix"></div>
            </a>

            <ul class="cart-dropdown fundo-popup" role="menu">
                <!-- Botão para fazer login -->
                <li>
                    <div class="cart-item">
                        <a class="btn btn-danger" href="login.php">Entrar</a>
                    </div>
                </li>

                <!-- Link para registro do novo cliente -->
                <li>
                    <div class="cart-item texto-centralizado">
                        <a href="register.php">Não é cliente? Cadastre-se</a>
                    </div>
                </li>
            </ul>

            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>

<?php 
    // Exibindo informações do carrinho
    } else {
?>

    <!-- Div de login ou cadastro -->
    <div class="col-md-3 col-sm-3">
        <!-- Button Kart -->
        <div class="btn-cart-md">
            <a class="cart-link" href="#">
                <!-- Image -->
                <img class="img-responsive" src="img/user.png" alt="" />
                <!-- Heading -->
                <h4>Bem-vindo</h4>
                <span> <?php echo $_SESSION[ 'nome' ] ?> </span>
                <div class="clearfix"></div>
            </a>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>

<?php 
    }
?>

<!-- Div do carrinho de compras -->
<div class="col-md-3 col-sm-3">
    <!-- Button Kart -->
    <div class="btn-cart-md">

        <?php 
            // Sessão ainda não iniciada ou usuário inválido
            if ( ( ! isset( $_SESSION[ 'usuario' ] ) ) or ( $_SESSION[ 'usuario' ] == '' ) ) {

        ?>
            <a class="cart-link" href="#">
                <!-- Image -->
                <img class="img-responsive" src="img/cart.png" alt="" />
                <!-- Heading -->
                <h4>Meu carrinho</h4>
                <span>Nenhum item.</span>
                <div class="clearfix"></div>
            </a>

        <?php 
            // Exibindo informações do carrinho
            } else {
        ?>
            <a class="cart-link" href="#">
                <!-- Image -->
                <img class="img-responsive" src="img/cart.png" alt="" />
                <!-- Heading -->
                <h4>Meu carrinho </h4>
                <span>3 itens (R$48.90)</span>
                <div class="clearfix"></div>
            </a>

            <ul class="cart-dropdown fundo-popup" role="menu">
                <li>
                    <!-- Cart items for shopping list -->
                    <div class="cart-item">
                        <!-- Item remove icon -->
                        <a href="#">
                            <i class="fa fa-times"></i>
                        </a>
                        <!-- Image -->
                        <img class="img-responsive img-rounded" src="img/nav-menu/nav1.jpg" alt="" />
                        <!-- Title for purchase item -->
                        <span class="cart-title">
                            <a href="#">Exception Reins Evocative</a>
                        </span>
                        <!-- Cart item price -->
                        <span class="cart-price pull-right red">$200/-</span>
                        <div class="clearfix"></div>
                    </div>
                </li>
                <li>
                    <!-- Cart items for shopping list -->
                    <div class="cart-item">
                        <!-- Item remove icon -->
                        <a href="#">
                            <i class="fa fa-times"></i>
                        </a>
                        <!-- Image -->
                        <img class="img-responsive img-rounded" src="img/nav-menu/nav2.jpg" alt="" />
                        <!-- Title for purchase item -->
                        <span class="cart-title">
                            <a href="#">Taut Mayoress Alias Appendicitis</a>
                        </span>
                        <!-- Cart item price -->
                        <span class="cart-price pull-right red">$190/-</span>
                        <div class="clearfix"></div>
                    </div>
                </li>
                <li>
                    <!-- Cart items for shopping list -->
                    <div class="cart-item">
                        <!-- Item remove icon -->
                        <a href="#">
                            <i class="fa fa-times"></i>
                        </a>
                        <!-- Image -->
                        <img class="img-responsive img-rounded" src="img/nav-menu/nav3.jpg" alt="" />
                        <!-- Title for purchase item -->
                        <span class="cart-title">
                            <a href="#">Sinter et Molests Perfectionist</a>
                        </span>
                        <!-- Cart item price -->
                        <span class="cart-price pull-right red">$99/-</span>
                        <div class="clearfix"></div>
                    </div>
                </li>

                <li>
                    <!-- Detalhes do carrinho -->
                    <div class="cart-item">
                        <a class="btn btn-info" data-toggle="modal" href="#shoppingcart1">Detalhes</a>
                    </div>
                </li>

                <li>
                    <!-- Sair -->
                    <div class="cart-item">
                        <a class="btn btn-danger" id="btn-sair">Sair</a>
                    </div>
                </li>
            </ul>
        <?php 
            }
        ?>

        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>

As you can see, each div in the above image opens a different popup, below the respective icon (should open). However, when I click on both the user DIV and the DIV of the cart the same popup is opened (always below the cart icon), as shown below:

Could anyone help me by pointing out the error? Each DIV should open a different popup (below its icon) as HTML.

NOTE: I'm using a bootstrap-based template.

php html html5 bootstrap

asked by anonymous 14.08.2017 / 21:51

1 answer

How to instantiate HttpClient in Angular typescript 4? Responsibility of Woocommerce Virtual Store

score 0 · Answer 1

I think this will help you build your code:

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>