0

tenho duas DIVs para abrir um popup específico, cada uma. Conforme imagem abaixo:

DIVs para abrir popups diferentes

Abaixo o HTML que monta as duas DIVs.

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

?>
    <!-- Div de login ou cadastro -->
    <div class="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>

Como vocês podem ver, cada div da imagem acima abre um popup diferente, abaixo do respectivo ícone (deveria abrir). Porém, quando clico tanto na DIV de usuário quanto na DIV do carrinho o mesmo popup é aberto (sempre abaixo do ícone do carrinho), conforme imagem abaixo:

Mesmo popup é aberto para as duas divs

Alguém poderia me ajudar me apontando o erro? Cada DIV deveria abrir um popup diferente (abaixo do respectivo ícone), conforme HTML.

OBS: Estou utilizando um template baseado no bootstrap.

4
  • Cara, complicado. Tem que fuçar nos códigos do template onde ocorre o evento pra ver o que é.
    – Sam
    Commented 14/08/2017 às 20:18
  • Olha quais são as dependências JavaScript que tem na página e procura pelo evento que foi adicionado às divs, ou até mesmo seus pais Commented 14/08/2017 às 20:45
  • Aparentemente você está efetuando as ações via $('.cart-link').on('click') ou algo do gênero no seu JS, e tanto o link do usuario como o do carrinho possuem a mesma classe -> "<a class="cart-link" href="#">", se for isso mesmo, a ação de 1 vale para o outro tb. Commented 14/08/2017 às 20:47
  • @LuizPillon era isso mesmo. Criei um novo js para a outra div e deu certo. Obrigado! Commented 15/08/2017 às 0:39

1 Resposta 1

0

Acredito que isso ajudará a você montar seu código:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .