Problems with modal bootstrap

Asked

Viewed 306 times

0

I am creating a page to generate coupon code and I am using the modal of bootstrap to open a modal with the coupon data, but when clicking 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>

php wordpress twitter-bootstrap

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

  • It didn’t work =/. It only opens the first modal the other doesn’t open, did I do something wrong?

  • If you followed exactly what was proposed in the answer there would be no error, therefore, yes, you are doing something wrong.

  • Look at the code below, I put it the way you said.

  • You use a conditioning structure to generate these modals, and you need to make sure that your structure is generating ids unique to each of them. If the ids are equal, will never work. Use the browser console to see if everything is being generated in the right way.

Browser other questions tagged php wordpress twitter-bootstrap

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