1
tatane
Modal bootstrap and xooptube
  • 2013/7/23 16:09

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


Following this post I would now like my video opens with the modal bootstrap.

So I created this code

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel"><{$video.title}></h3> </div> <div class="modal-body"> <class="center"> <{$video.showvideo}> </p> </div> <div class="modal-footer left"> <{$video.description|truncate:$video.total_chars}> </div> </div>

<{if 
$video.screen_shot}>
<
a href="#myModal" role="button" class="btn" data-toggle="modal"><{$video.videothumb}> </a>
<{/if}>




The problem is that when I have several video in a category, it shows me the same respect, the same video, the same description in the modal

With an idea?

thank you

2
timgno
Re: Modal bootstrap and xooptube
  • 2013/7/23 16:57

  • timgno

  • Module Developer

  • Posts: 1504

  • Since: 2007/6/21


You must always refer to a unique id for each element and code of the modal must be in another file, this is my suggestion.

The problem is that unless you reload the page you will always have the same id

3
tatane
Re: Modal bootstrap and xooptube
  • 2013/7/23 17:03

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


I tried

<div id="myModal<{$video.id}>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel"><{$video.title}></h3> </div> <div class="modal-body"> <class="center"> <{$video.showvideo}> </p> </div> <div class="modal-footer left"> <{$video.description|truncate:$video.total_chars}> </div> </div>

<{if 
$video.screen_shot}>
    <
a href="#myModal<{$video.id}>" role="button" class="btn" data-toggle="modal"><{$video.videothumb}> </a>
    <{/if}>


But modal is not work

4
tatane
Re: Modal bootstrap and xooptube
  • 2013/7/23 17:22

  • tatane

  • Just can't stay away

  • Posts: 649

  • Since: 2008/5/6 1


It's good it was a cache issue.

with
<div id="myModal<{$video.id}>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel"><{$video.title}></h3> </div> <div class="modal-body"> <class="center"> <{$video.showvideo}> </p> </div> <div class="modal-footer left"> <{$video.description|truncate:$video.total_chars}> </div> </div>

<{if 
$video.screen_shot}>
    <
a href="#myModal<{$video.id}>" role="button" class="btn" data-toggle="modal"><{$video.videothumb}> </a>
    <{/if}>


Is good work

Login

Who's Online

200 user(s) are online (114 user(s) are browsing Support Forums)


Members: 0


Guests: 200


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits