Problems with modal bootstrap

0

I am creating a page to generate coupon code and I am using the modal bootstrap to open a modal with the coupon data, however when I click on one of the buttons opens all at the same time, how can I solve this?

<div class="cupons">
<div class="container">
  <h1>Cupons</h1>
    <div class="row">

         <?php
            $args = array('post_type'=>'cupons', 'showposts'=>-1);
            $my_cupons = get_posts( $args );
            $count = 0; if($my_cupons) : foreach($my_cupons as $post) : setup_postdata ($post) ;
          ?>

            <div class="col-md-3 col-lg-3">
            <div class="cupons-box">

                <p> <?php the_title(); ?> </p>

                <?php the_post_thumbnail(false, array('class' => 'img-responsive')); ?>

                <!-- Small modal -->
                <button type="button" class="btn btn-danger btn-custom center-block" data-toggle="modal" data-target=".bs-example-modal-sm">Gerar cupom</button>
                <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                  <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">

                      <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel"><?php echo rwmb_meta('titulo'); ?></h4>
                        </div>
                      <div class="modal-body">
                            <p>Acesso o site <a href="<?php echo rwmb_meta('url'); ?>">clicando aqui!</a></p>
                            <div class="input-group">
                                <span class="input-group-addon" id="basic-addon3">Código:</span>
                                <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" value="<?php echo rwmb_meta('codigo-cupom'); ?>">
                            </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default center-block" data-dismiss="modal">Fechar</button>
                      </div>

                    </div>
                  </div>
                </div>
            </div> 

        </div>

           <?php
            endforeach;
            endif;
          ?> 

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

    
asked by anonymous 21.01.2017 / 20:21

1 answer

0

If you use data-target=".bs-example-modal-sm" , then everything that has this class will be fired. In your case, all modals have this class.

Instead, use ids: data-target="#modal<?php echo rwmb_meta('codigo-cupom'); ?>" , and pass this id to each of the modalities: <div id="modal<?php echo rwmb_meta('codigo-cupom'); ?>" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> .

    
25.01.2017 / 15:04