multi bootstrap modal in one page issue

У меня есть несколько карточек на странице, я отобрал их все с помощью цикла, я хочу, когда пользователь щелкнул по каждому из них, связал модальное шоу с пользователем, я реализую это со следующим фрагментомmulti bootstrap modal in one page issue

   {% for i,item in node.field_what_you_will_build %} 
      <div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}"> 
      <div id="projectcard-{{ i }}" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
          <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header nopadding"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <div class="login-head"> 
             <img src="/{{ directory }}/images/logo-b.png" /> 
            </div> 
           </div> 
           <div class="modal-body"> 


           </div> 

          </div> 

         </div> 
        </div> 

        <div class="lbl"> {{ 'Project'|t }}</div> 
        <div class="title">{{ item.first }}</div> 
        <div class="desc">{{ item.second }} 

        </div> 
        <div class="badge">{{ i+1}}</div> 
         <div class="shadow-wrapper"> 
         </div> 
        </div> 
       {% endfor %}

, когда я нажимаю на картах модальный получать шоу правильно, но когда нажмите закрыть модальные исчезает, а фон становится темно, когда я осмотреть мои разметки я видел

<div class="modal-backdrop fade in"></div> 
    <div class="modal-backdrop fade in"></div> 
    <div class="modal-backdrop fade in"></div>

добавлен в конце body.where проблемы? мое решение правильно, чтобы реализовать мультизагрузочный модальный на странице? если не то, что является истинным решением? , кажется, когда я нажимаю на близко некоторые <div class="modal-backdrop fade in"></div> добавить к моей разметке

источник

2016-09-29 zhilevan

Возможный дубликат [Twitter самонастройки модальный-фон не исчезает] (http://stackoverflow.com/questions/11519660/twitter-bootstrap-modal-backdrop-doesnt-disappear) –

@LuukSkeur нет, это не дублируется, есть проблема здесь, пожалуйста, прежде чем проголосовать внимательно прочитайте вопрос. – zhilevan

@LuukSkeur Я нашел свое решение, посмотрю на ответ и скажу, что вы думаете, что это дубликат этого вопроса? – zhilevan

Я нашел решение этой проблемы, возникает проблема, потому что модальная разметка была внутри элемента причина модальные срабатывают по щелчку, я имею в виду проблемы

<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}"> 
    <div id="projectcard-{{ i }}" class="modal fade" role="dialog"> 
        <div class="modal-dialog"> 
         <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header nopadding"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <div class="login-head"> 
            <img src="/{{ directory }}/images/logo-b.png" /> 
           </div> 
          </div> 
          <div class="modal-body"> 
          </div> 
         </div> 
        </div> 
        </div> 
       </div>

** Так решение **

<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}"> 
    </div> 
    <div id="projectcard-{{ i }}" class="modal fade" role="dialog"> 
        <div class="modal-dialog"> 
         <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header nopadding"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
           <div class="login-head"> 
            <img src="/{{ directory }}/images/logo-b.png" /> 
           </div> 
          </div> 
          <div class="modal-body"> 
         </div> 
        </div> 
      </div> 
     </div>

Я имею в виду не Помещенный Модальные Содержимое внутри элемента вызывают мода аль вызвал

источник

2016-09-29 10:44:13 zhilevan

multi bootstrap modal in one page issue

ответ

Смежные вопросы