我正在使用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 -->
答案 0 :(得分:0)
有两个问题:
对于父级和模式弹出窗口,您都有相同的id = 'speccontriModal'
。
您在父级上缺少属性data-target
。