记录:bootstrap modal

这是bootstrap的悬浮框代码。简历项目里用来显示二维码。

<!-- 二维码模态框 -->
<div class="container" style="margin-top:200px;">
    <!-- Modal -->
    <div class="modal fade" style="margin-top:20%;" id="myModal" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style='text-align:center;'>简历二维码</h4>
                </div>
                <div class="modal-body">
									<% if @resume.qrcode_image.present? && @resume.resume_html.present? %>
                    <div class="row">
                        <div class="col-md-5 col-md-offset-1">
                            <%= image_tag @resume.qrcode_image.url, style: "width:180px;height:180px;" %>
                            <%#= link_to("Download Resume", @resume.qrcode_image.url, style:'text-align:center;') %>
                        </div>
                        <div class="col-md-6" style="margin-top:8%">
                            <p>扫描此二维码查看您的简历</p>
                            <p>保存此二维码,发送给你想要给看简历的人</p>
                            <p>查看的简历,根据您的修改实时更新</p>
                        </div>
                    </div>
										<% else %>
										<p>点击保存并刷新页面才能生成简历二维码</p>
										<% end %>
                </div>
            </div>
        </div>
    </div>
</div>

<button type="button" name="button" class="btn btn-primary pull-center" id="qr-code" data-toggle="modal" data-target="#myModal">点击生成简历二维码</button>这里是触发按钮。要让modal真正的work,还要在application.js里面加入

//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap-sprockets