模态中是否可以有多个模态?

时间:2015-11-24 19:44:39

标签: jquery twitter-bootstrap-3 modal-dialog

我正在使用Bootstrap 3.在访问数据以选择选项时,我一直在为用户设置此对话框或模态提示。需要构建它的方式将有一个模式打开另一个模式,然后根据您选择的按钮打开另一个模式。

我确信我只是错过了一些连接第三个模态的代码。如果您查看此fiddle,请点击“从这里开始”#39;按钮然后'贡献来自:'然后点击“特定贡献者'

这将显示第三个对话框上的模态未初始化。任何帮助表示赞赏。

<!-- 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 -->

1 个答案:

答案 0 :(得分:0)

有两个问题:

  1. 对于父级和模式弹出窗口,您都有相同的id = 'speccontriModal'

  2. 您在父级上缺少属性data-target

  3. 工作小提琴:http://jsfiddle.net/q5xge9b4/1/