Two Divs opening the same popup

Asked

Viewed 69 times

0

I have two Divs to open a specific popup, each one. As image below:

DIVs para abrir popups diferentes

Below the HTML that mounts the two 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>

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

Mesmo popup é aberto para as duas divs

Could someone help me by pointing out the mistake? Each DIV should open a different popup (below the respective icon), according to HTML.

NOTE: I am using a template based on bootstrap.

  • Expensive, complicated. You have to sift through the template codes where the event takes place to see what is.

  • Look at the Javascript dependencies you have on the page and look for the event that has been added to Windows, or even your parents

  • Apparently you are performing the actions via $('.Cart-link'). on('click') or something like that in your JS, and both the user and cart link have the same class -> "<a class="Cart-link" href="#">", if that’s right, the action of 1 goes for the other tb.

  • @Luizpillon was just that. I created a new js for the other div and it worked. Thanks!

1 answer

0

I believe this will help you to assemble 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>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.