modal

 通过这种方式绑定数据 $("#modalTarget").data("target", paras);

然后取出数据，   data: JSON.stringify($("#modalTarget").data("target")),

<!-- Modal Update Failed-->
    <div class="modal fade" id="UpdateModalFailed">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="modelFailedText" class="text-center" style="margin: 30px 0px;">&nbsp;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><%= GetResourceValue("CP_PointAssignment_Cancel") %></button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Confirm-->
    <div class="modal fade" id="modalConfirmAssignement">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h2><%= GetResourceValue("CP_PointAssignment_ConfirmAssignment") %></h2>
                </div>
                <div class="modal-body">
                    <table class="table text-center">
                        <thead>
                            <tr>
                                <th><%= GetResourceValue("CP_PointAssignment_TotalAssigned") %></th>
                                <th><%= GetResourceValue("CP_PointAssignment_RemainingPoints") %></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <em>
                                        <b class="green">0</b>
                                    </em>
                                </td>
                                <td>
                                    <b>0</b>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <div class="col-sm-6 text-center">
                        <button type="button" id="btnAssignmentAccept" data-loading-text="<%= GetResourceValue("CP_PointAssignment_Processing") %>" class="bt-rounded bt-green w-200"><%= GetResourceValue("CP_PointAssignment_Accept") %></button>
                    </div>
                    <div class="col-sm-6 text-center">
                        <button type="button" class="bt-rounded bt-gray w-200" data-dismiss="modal" aria-label="Close"><%= GetResourceValue("CP_PointAssignment_Cancel") %></button>
                    </div>
                    <input type="hidden" id="modalTarget" />
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Assign Success-->
    <div class="modal fade " id="modalConfirmated">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content border-top-blue">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="w-100 margin-top-20  message">
                        <div class="inner-message ">
                            <i class="ico ico-mark-bold"></i>
                            <p>
                                <em id="emTitle"><%= GetResourceValue("CP_PointAssignment_AssignSucceed") %></em>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

data-dismiss

https://stackoverflow.com/questions/34627271/understanding-how-data-dismiss-attribute-works-in-bootstrap

The hiding functionality is implemented in the modal.js in this way.

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.

 

作者:Chuck Lu    GitHub