|
@@ -0,0 +1,113 @@
|
|
|
|
+<!----------------------------------------------------------------------------------------------------------------------
|
|
|
|
+ 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">×</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>
|
|
|
|
+
|