bootstrap模態框 確認框/提示框 的常用實現 原

HTML 代碼: 

<!-- 模態框(Modal)彈出層 -START -->
<!-- 萬能確認框 -->
<div class="modal fade" id="delcfmModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">確認信息</h4>
            </div>
            <div class="modal-body">
                <p id="delcfmMsg">您確認要刪除嗎?</p>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="submitUrl"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <a onclick="urlSubmit()" class="btn btn-success" data-dismiss="modal">確定</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 提示框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
    <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>
                <h4 class="modal-title" id="modalTitle" style="text-align: center;">
                    提示框
                </h4>
            </div>
            <div id="modalText" class="modal-body">
                提示內容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模態框(Modal)彈出層 -END -->

javascript 函數 

  /**
     * @Description:   同意或拒絕審覈確認框
     * @Author:        張穎輝(yh)
     * @Date:          2018/9/14 16:18
     * @param:
     * @return:
     * @Version:       1.0
     */
    function auditSubmit(agree) {
        //提交審覈結果url
        var submitUrl = "companyLoanEx/submitAudit.html?agree="+agree;
        $('#submitUrl').val(submitUrl);//給會話中的隱藏屬性URL賦值
        var flag = "";
        if (agree) {
            flag = " [通過] "
        } else {
            flag = " [拒絕] "
        }
        $('#delcfmMsg').html("您確認審覈" + flag + "嗎?")
        $('#delcfmModel').modal();
    }


   /**
     * @Description:   提交信息確認框
     * @Author:        張穎輝(yh)
     * @Date:          2018/7/4 18:20
     * @param:
     * @return:
     * @Version:       1.0
     */
    function urlSubmit() {
        var submitUrl = $.trim($("#submitUrl").val());//獲取會話中的隱藏屬性URL
        // window.location.href = submitUrl;
        alert("使用ajax異步調用提交審覈 url=" + submitUrl)
    }


    /**
     * @Description:   提示框
     * @Author:        張穎輝(yh)
     * @Date:          2018/9/14 16:14
     * @param:
     * @return:
     * @Version:       1.0
     */
    var showModal = function (title, text) {
        $("#modalTitle").html(title);
        $("#modalText").html(text);
        $("#myModal").modal();
    }
    

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章