Возможно ли иметь более одного модального внутри модального?

Question

Я использую Bootstrap 3. Я настраивал этот диалог или модальное приглашение для пользователей при доступе к данным для выбора параметров. То, как это нужно построить, будет иметь один модальный открыть другой, который затем откроет другой, основываясь на выбранной вами кнопке.

Уверен, что я просто пропустил часть кода, которая соединит третий модальный. Если вы проверите это fiddle, нажмите кнопку «начать здесь», а затем «Вклады от:», а затем нажмите «Конкретный Contributor»

Это покажет вам, что модальный в третьем диалоге не инициализируется. Любая помощь приветствуется.

<!-- Ask Anything Button trigger --> 
<a class="btn btn-danger btn-xl" data-toggle="modal" data-target="#askanythingModal"><i class="fa fa-map-signs"></i> Start Here</a> 

<!-- Ask Anything Modal START --> 
<div class="modal fade" id="askanythingModal" tabindex="-1" role="dialog" aria-labelledby="askanythingModal" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i style="font-size: 35px!important;" class="fa fa-times-circle-o"></i></button> 
       <div class="modal-header"> 
       <h3 class="modal-title">Ask Anything</h3> 
       </div><br> 
       <blockquote style="text-align: justify;" class="well">First, click below to see who money came <strong>FROM</strong> or who money went <strong>TO</strong>. 
       Second, build your exact question by clicking options, then press <strong>GO</strong> and we'll provide the answer.</blockquote> 
       <a href="#" class="btn btn-info btn-xl" data-toggle="modal" data-target="#contribfromModal">Contributions FROM</a> | <a class="btn btn-info btn-xl" data-toggle="modal" data-target="#contribtoModal">Contributions TO</a> 
       <h4 class="well">Currently Looking at: Contribution Data</h4> 


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

<!-- Contributions FROM > BUTTON MODAL --> 
       <div class="modal fade" id="contribfromModal" tabindex="-2" role="dialog" aria-labelledby="contribfromModal" aria-hidden="true"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-body"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i style="font-size: 35px!important;" class="fa fa-times-circle-o"></i></button> 
           <div class="modal-header"> 
           <h3 class="modal-title">Show contributions FROM:</h3> 
           </div><br> 
           <div style="padding: 15px;" class="row"> <!-- first row of icons --> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="modal" data-placement="top" data-original-title="Find a specific contributor by name" id="speccontriModal" role="dialog" aria-labelledby="speccontribModal" aria-hidden="true"><i class="fa fa-user"></i> Specific Contributor</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything"><i class="fa fa-university"></i> Parent Organization</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-toggle="modal" data-placement="top" data-original-title="Find contributors by selected economic sectors"><i class="fa fa-industry"></i> Industry(s)</a> 
            </div> 
           </div> <!-- end first row --> 
           <div style="padding: 15px;" class="row"> <!-- second row of icons --> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Find contributors by city, state and zipcode"><i class="fa fa-map-marker"></i> Location(s)</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Select contributors that are either individuals or non-individuals"><i class="fa fa-building-o"></i> Types of Contributors</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Find contributions by record level information, such as amount or date"><i class="fa fa-files-o"></i> Types of Records</a> 
            </div> 
           </div> <!-- end second row --> 
          </div> 
         </div> 
        </div> 
       </div> <!-- end modal --> 

       <!-- Specific Contributor > BUTTON MODAL --> 
       <div class="modal fade" id="speccontriModal" tabindex="-2" role="dialog" aria-labelledby="speccontriModal" aria-hidden="true"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-body"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i style="font-size: 35px!important;" class="fa fa-times-circle-o"></i></button> 
           <div class="modal-header"> 
           <h3 class="modal-title">Show contributions TO:</h3> 
           </div><br> 

          </div> 
         </div> 
        </div> 
       </div> <!-- end modal --> 



<!-- Contributions TO > BUTTON MODAL --> 
       <div class="modal fade" id="contribtoModal" tabindex="-2" role="dialog" aria-labelledby="contribtoModal" aria-hidden="true"> 
        <div class="modal-dialog"> 
         <div class="modal-content"> 
          <div class="modal-body"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i style="font-size: 35px!important;" class="fa fa-times-circle-o"></i></button> 
           <div class="modal-header"> 
           <h3 class="modal-title">Show contributions TO:</h3> 
           </div><br> 
           <div style="padding: 5px;" class="row"> <!-- first row of icons --> 
           <h4>By type of receiving committee (Filer)</h4> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Search for candidates who share attributes, such as political party, incumbency status, district, winners, year and more"><i class="fa fa-users"></i> Candidate(s)</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Search for lawmakers who share attributes, such as political party, represented district and/or legislative committee"><i class="fa fa-gavel"></i> Lawmaker(s)</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Find state ballot initiatives and referendums by name, subject, state or year"><i class="fa fa-file-text-o"></i> Ballot Measure(s)</a> 
            </div> 
           </div> <!-- end first row --> 
           <div style="padding: 5px;" class="row"> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Select records of official state party committees"><i class="fa fa-industry"></i> Political Party Committees(s)</a> 
            </div> 
            <div class="col-sm-4"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Select records within one or more State(s) or Jurisdiction(s)"><i class="fa fa-folder-open-o"></i> Filer</a> 
            </div> 
           </div> 
           <div style="padding: 5px;" class="row"> <!-- second row of icons --> 
           <h4>By State/Year</h4> 
            <div class="col-sm-6"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Find state ballot initiatives and referendums by name, subject, state or year"><i class="fa fa-map-marker"></i> Specific State(s)</a> 
            </div> 
            <div class="col-sm-6"> 
            <a class="btn btn-info btn-ask-anything" data-toggle="tooltip" data-placement="top" data-original-title="Select records within one or more election year(s)"><i class="fa fa-building-o"></i> Specific Election Years</a> 
            </div> 
           </div> <!-- end second row --> 
          </div> 
         </div> 
        </div> 
       </div> <!-- end modal --> 

Answer 1

Там 2 вопроса:

1. У вас же id = 'speccontriModal' для родителя и модального всплывающего окна.

2. Вам не хватает атрибута data-target на родительском.

Работа скрипку: http://jsfiddle.net/q5xge9b4/1/