ConstructionCost/public/scHintBox.html

<!----------------------------------------------------------------------------------------------------------------------
    chenshilong, 2018-04-29
    自定义对话框，通用，用于替代系统对话框。系统自带的比较简陋，最严重的是一旦被浏览器屏蔽则无法再弹出。
    自定义对话框包括：
        1、只有一个按钮的信息提示框。
        2、有两个按钮的操作确认询问框。
        3、有三个按钮的多分支选择询问框。
        4、输入文本值对话框。
----------------------------------------------------------------------------------------------------------------------->

<div class="modal fade" id="hintBox" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="hintBox_title">标题</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div id = "hintBox_info" style="margin:5px 10px 10px 10px;">提示明细</div>
                <div style="margin:5px 10px 5px 10px;">
                    <input type="text" class="form-control" value="" id="hintBox_value"/>
                </div>
            </div>

            <div class="modal-footer" style="justify-content: right">
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="hintBox_btn_yes">是</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="hintBox_btn_no">否</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="hintBox_btn_cancel">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    G_HINTBOX_VALUE = null;
    hintBoxButtonType = {yes: 1, yesNo: 2, yesNoCancel: 3};
    function speFont(str){
        return `<span style='color:red;font-weight:bold;font-size:15px'> ${str} </span>`;
    };

    function hintBox(title, caption, btnType, doYes, doNo) {
        $('#hintBox_title').text(title);
        $('#hintBox_info').html(caption);

        $('#hintBox_value').hide();
        $('#hintBox_info').show();
        $('#hintBox_btn_yes').show();
        $('#hintBox_btn_yes').text('是');
        $("#hintBox_btn_yes").unbind();
        $('#hintBox_btn_no').show();
        $('#hintBox_btn_no').text('否');
        $('#hintBox_btn_no').unbind();
        $('#hintBox_btn_cancel').show();
        $('#hintBox_btn_cancel').text('取消');
        $('#hintBox_btn_cancel').unbind();

        switch (btnType) {
            case hintBoxButtonType.yes:
                $('#hintBox_btn_yes').text('确定');
                $('#hintBox_btn_no').hide();
                $('#hintBox_btn_cancel').hide();
                break;
            case hintBoxButtonType.yesNo:
                $('#hintBox_btn_cancel').hide();
                break;
        }

        if (doYes){
            $('#hintBox_btn_yes').click(doYes);
        }

        if (doNo){
            $('#hintBox_btn_no').click(doNo);
        }

        $('#hintBox_btn_cancel').click(
            function () {return;}
        );

        $("#hintBox").modal({show:true});
    };

    function hintBoxValue(title, value, doYes) {
        $('#hintBox_title').text(title);

        $('#hintBox_info').hide();
        G_HINTBOX_VALUE = value;

        $('#hintBox_value').show();
        $('#hintBox_value').val(value);
        $("#hintBox_value").unbind();
        $("#hintBox_value").change(
            function () {
                G_HINTBOX_VALUE = $('#hintBox_value').val();
            }
        );

        $('#hintBox_btn_yes').show();
        $('#hintBox_btn_yes').text('确定');
        $('#hintBox_btn_yes').unbind();
        $('#hintBox_btn_yes').click(doYes);   // doYes不能给参数

        $('#hintBox_btn_no').hide();
        $('#hintBox_btn_cancel').hide();

        $("#hintBox").modal({show:true});
    };
</script>