对话框

对话框样式

框架定义的对话框，可用默认对话框样式，也可用警告框、面板等框架已定义的样式，同时也可自定义对话框样式。

内置样式

配置对象属性有{"title":"选择框","text":"请选择确定或取消？","confirm":"确定","cancel":"取消"}，显示如下：

按钮块显示

配置参数{"break":true}时，确定和取消按钮分开显示。

可选内容

除text参数外，其余参数均为可选，下列三示例分别移除了标题、确认、取消的效果，在应用中根据需要配置参数。

深色样式

深色样式效果，配置dark为true，内置对话框显示为深色模式。

参数说明

弹出对象

根据参数说明，弹出的对象有3种方式，第1种是自定义的对象，第2种是内置的对话框，第3种是iframe框架。

自定义对象

    <button class="button" id="dialog-object">点击弹出内置对话框</button>
    <div class="dialog" id="dialogobject">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或取消？</div>
        <div data-dismiss="dialog" class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-object").dialog({
          "target":"#dialogobject",
        });
      })
    </script>
  

内置对象

    <button class="button" id="dialog-set">点击弹出内置对话框</button>
    <script>
      $(function(){
        $("#dialog-set").dialog({
          "target":{
            "id":"hellodialog",
            "title":"Hello Dialog",
            "text":"Hello World.",
            "confirm":"Confirm",
            "cancel":"Cancel",
            "break":true,
            "close":true
          }
        });
      })
    </script>
  

遮罩

默认的对话框，包含遮罩，也可通过配置不显示遮罩或改变遮罩的颜色和透明度。

不显示遮罩

    <button class="button" id="dialog-unmask">不显示遮罩</button>
    <script>
      $(function(){
        $("#dialog-unmask").dialog({
          "target":{
            "id":"dialogunmask",
            "title":"Hello Dialog",
            "text":"Hello World.",
            "confirm":"Confirm",
            "cancel":"Cancel",
            "dark":true,
          },
          "mask":false,
          "style":"shadow-big"
        });
      });
    </script>
  

遮罩样式

    <button class="button" id="dialog-mask">遮罩样式</button>
    <div class="dialog" id="dialogmask">
      <div class="dialog-body alert">
        <i class="icon-close" data-dismiss="dialog"></i>
        <strong>警告：</strong>这是一条警告信息。
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-mask").dialog({
          "target":"#dialogmask",
          "mask":{
            "bg":"bg-main",
            "opacity":90
          },
        });
      })
    </script>
  

不遮挡

默认的对话框，开启后有遮罩及无法操作其他页面内容，设置cover为false后，即可操作其他页面内容。

不遮挡内容

    <button class="button" id="dialog-uncover">不遮挡内容</button>
    <script>
      $(function(){
        $("#dialog-uncover").dialog({
          "target":{
            "id":"dialoguncover",
            "title":"不遮挡",
            "text":"可操作其他页面内容",
            "confirm":"确定",
            "dark":true
          },
          "cover":false,
        });
      });
    </script>
  

异步

配置ajax参数，可传data参数，并用callback回调函数。

异步处理

    <button class="button" id="dialog-ajax">异步加载</button>
    <div class="dialog" id="ajaxdialog">
      <div class="dialog-body dialog-content">
        <div class="dialog-title">异步加载</div>
        <div class="dialog-text">请选择确定或取消？</div>
        <div data-dismiss="dialog" class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-ajax").dialog({
          "target":"#ajaxdialog",
          "ajax":{
            "url":"/2.0/data/dialog-ajax.php",
            "data":{"title":"标题","text":"文本"},
            "callback":function(data){
              $("#ajaxdialog>.dialog-body>.dialog-text").html(data["text"]);
            }
          },
        });
      })
    </script>
  

显示位置

配置show参数，可让对话框显示在不同的位置。

侧方显示

侧方show值包含上方.fixed-top、右侧.fixed-right、下方.fixed-bottom、左侧.fixed-left四个位置。

    <div class="dialog" id="dialog_top">
      <div class="dialog-body" align="center" data-dismiss="dialog">上方显示</div>
    </div>
    <button class="button" id="dialog-top">上方显示</button>
    <script>
      $(function(){
        $("#dialog-top").dialog({
          "target":"#dialog_top",
          "show":"fixed-top",
          "size":"w12 y2",
          "style":"bg-main"
        });
      });
    </script>

    <div class="dialog" id="dialog_right">
      <div class="dialog-body" align="center" data-dismiss="dialog">右侧显示</div>
    </div>
    <button class="button" id="dialog-right">右侧显示</button>
    <script>
      $(function(){
      $("#dialog-right").dialog({
        "target":"#dialog_right",
        "show":"fixed-right",
        "size":"w3 y12",
        "style":"bg-main"
      });
      });
    </script>

    <div class="dialog" id="dialog_bottom">
      <div class="dialog-body" align="center" data-dismiss="dialog">下方显示</div>
    </div>
    <button class="button" id="dialog-bottom">下方显示</button>
    <script>
      $(function(){
        $("#dialog-bottom").dialog({
          "target":"#dialog_bottom",
          "show":"fixed-bottom",
          "size":"w12 y2",
          "style":"bg-main"
        });
      });
    </script>

    <div class="dialog" id="dialog_left">
      <div class="dialog-body" align="center" data-dismiss="dialog">左侧显示</div>
    </div>
    <button class="button" id="dialog-left">左侧显示</button>
    <script>
    $(function(){
      $("#dialog-left").dialog({
        "target":"#dialog_left",
        "show":"fixed-left",
        "size":"w3 y12",
        "style":"bg-main"
      });
    });
    </script>
  

中间显示

中间显示show值包含顶部居中.fixed-top-center、右侧居中.fixed-right-cente、底部居中.fixed-bottom-center、左侧居中.fixed-left-center四个位置；同时可通过style值设置对应的边距。

    <button class="button" id="dialog-center-top">顶部居中</button>
    <script>
      $(function(){
        $("#dialog-center-top").dialog({
          "target":{
            "id":"dialog_center_top",
            "text":"顶部居中",
            "confirm":"确定"
          },
          "show":"fixed-top-center",
          "style":"margin-top",
        });
      });
    </script>

    <button class="button" id="dialog-center-right">右侧居中</button>
    <script>
      $(function(){
        $("#dialog-center-right").dialog({
          "target":{
            "id":"dialog_center_right",
            "text":"右侧居中",
            "confirm":"确定"
          },
          "show":"fixed-right-center",
          "style":"margin-right",
        });
      });
    </script>

    <button class="button" id="dialog-center-bottom">底部居中</button>
    <script>
      $(function(){
        $("#dialog-center-bottom").dialog({
          "target":{
            "id":"dialog_center_bottom",
            "text":"底部居中",
            "confirm":"确定"
          },
          "show":"fixed-bottom-center",
          "style":"margin-bottom",
        });
      });
    </script>

    <button class="button" id="dialog-center-left">左侧居中</button>
    <script>
      $(function(){
        $("#dialog-center-left").dialog({
          "target":{
            "id":"dialog_center_left",
            "text":"左侧居中",
            "confirm":"确定"
          },
          "show":"fixed-left-center",
          "style":"margin-left",
        });
      });
    </script>
  

四角显示

四边角显示show值包含左上角.fixed-left-top、左下角.fixed-left-bottom、右上角.fixed-right-top、右下角.fixed-right-bottom四个位置。

    <button class="button" id="dialog-left-top">左上角</button>
    <script>
      $(function(){
        $("#dialog-left-top").dialog({
          "target":{
            "id":"dialog_left_top",
            "text":"左上角",
            "confirm":"确定"
          },
          "show":"fixed-left-top margin-top",
          "style":"margin-left",
        });
      });
    </script>

    <button class="button" id="dialog-left-bottom">左下角</button>
    <script>
      $(function(){
        $("#dialog-left-bottom").dialog({
          "target":{
            "id":"dialog_left_bottom",
            "text":"左下角",
            "confirm":"确定"
          },
          "show":"fixed-left-bottom margin-bottom",
          "style":"margin-left",
        });
      });
    </script>

    <button class="button" id="dialog-right-top">右上角</button>
    <script>
      $(function(){
        $("#dialog-right-top").dialog({
          "target":{
            "id":"dialog_right_top",
            "text":"右上角",
            "confirm":"确定"
          },
          "show":"fixed-right-top margin-top",
          "style":"margin-right",
        });
      });
    </script>

    <button class="button" id="dialog-right-bottom">右下角</button>
    <script>
      $(function(){
        $("#dialog-right-bottom").dialog({
          "target":{
            "id":"dialog_right_bottom",
            "text":"右下角",
            "confirm":"确定"
          },
          "show":"fixed-right-bottom margin-bottom",
          "style":"margin-right",
        });
      });
    </script>
  

显示方式

默认的显示方式为点击元素后显示对话框，除此之外，也可以是鼠标经过显示，或直接调用显示。显示的大小可以通过size属性设置，也可以用style额外设置对话框的样式，极其灵活。

触发行为

    <button class="button" id="dialog-mouse">鼠标经过显示对话框</button>
    <script>
      $(function(){
        $("#dialog-mouse").dialog({
          "target":{
            "id":"dialogmouse",
            "title":"显示对话框",
            "text":"当鼠标经过显示此对话框",
            "confirm":"确定",
          },
          "mouse":"mouseenter",
        });
      })
    </script>
  

调用显示

在无任何触发行为的情况下，直接调用显示对话框，方法为：

    <script>
      $(function(){
        $().dialog({
          "target":{
            "id":"dialoguntarget",
            "title":"对话框显示",
            "text":"加载或直接调用显示对话框",
            "confirm":"确定",
          },
        });
      })
    </script>
  

尺寸样式

属性size及style可分别设置对话框的大小及样式，已定义的size有小.dialog-small、中.dialog-middle、大.dialog-big、全屏.dialog-full四个，也可自定义相关的样式类。

    <div class="dialog" id="dialog_size">
      <div class="dialog-body" align="center" data-dismiss="dialog">对话框尺寸样式</div>
    </div>
    <button class="button" id="dialog-size">对话框尺寸样式</button>
    <script>
      $(function(){
        $("#dialog-size").dialog({
          "target":"#dialog_size",
          "size":"dialog-middle",
          "style":"bg-white radius-big shadow"
        });
      });
    </script>
  

关闭对话框

有3种方式可关闭对话框，只需满足其中一个条件即可关闭，分别为：

1. 在需要关闭的元素上添加data-dismiss="dialog"，点击元素后即可关闭；
2. 当属性dismiss值为true时，点击对话框外部可关闭；
3. 当设置属性timer值时，单位为秒，可在限定的时间内自动关闭对话框。

关闭对话框

    <button class="button" id="dialog-close">关闭对话框</button>
    <div class="dialog" id="dialogclose">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或关闭？</div>
        <div class="dialog-confirm">确定</div>
        <div data-dismiss="dialog" class="dialog-cancel">关闭</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-close").dialog({
          "target":"#dialogclose",
          "dismiss":true,
          "timer":3
        });
      })
    </script>
  

禁止关闭

上述的3个条件均不满足时，即无法关闭对话框。

    <button class="button" id="dialog-unclose">禁止关闭</button>
    <script>
      $(function(){
        $("#dialog-unclose").dialog({
          "target":{
            "id":"dialogunclose",
            "text":"此对话框无法关闭，请刷新页面。",
          },
          "dismiss":false,
        });
      })
    </script>
  

调用关闭

当一个已显示的对话框，其id为dialog-close，也可以通过JS调用关闭。

    <script>
      $(function(){
        $().dialog({
          "close":"#dialog-close",
        });
      })
    </script>
  

回调函数

在确认按钮处添加data-confirm="dialog"属性及设置onconfirm参数，即可执行点击确认时的回调函数；同样在取消按钮添加data-cancel="dialog"属性及设置oncancel参数，即可执行点击取消时的回调函数。

    <button class="button" id="dialog-function">回调函数</button>
    <div class="dialog" id="dialogfunction">
      <div class="dialog-body dialog-content">
        <div class="dialog-text">请选择确定或取消？</div>
        <div class="dialog-confirm" data-confirm="dialog">点我确定</div>
        <div class="dialog-cancel" data-cancel="dialog">点我取消</div>
      </div>
    </div>
    <script>
      $(function(){
        $("#dialog-function").dialog({
          "target":"#dialogfunction",
          "onconfirm":function(){
            $().dialog({
              "target":{
                "id":"confirmdialog",
                "text":"确认框",
                "confirm":"点击确认后显示",
              },
              "timer":2
            });
          },
          "oncancel":function(){
            alert("点击取消后出现");
          }
        });
      })
    </script>