一个非常漂亮的自定义对话框

2014-08-27 18:02:00
admin
原创 4289
摘要:大家在开发前端过程中很大一部分会用到弹出框,例如js里边的alert,弹出框样式杂乱无章,客户体验不好,下面介绍的弹出框非常强大,可以自定义弹出消息、自定义表单内容表单等,支持对话框自定义,遮罩层自定义,对话框拖拽,按钮自定义,自定义按钮事件等,非常灵活。

一个非常漂亮的自定义对话框

一个非常漂亮的自定义对话框

一个非常漂亮的自定义对话框

大家在开发前端过程中很大一部分会用到弹出框,例如js里边的alert,弹出框样式杂乱无章,客户体验不好,下面介绍的弹出框非常强大,可以自定义弹出消息、自定义表单内容表单等,支持对话框自定义,遮罩层自定义,对话框拖拽,按钮自定义,自定义按钮事件,非常灵活,下面是一个例子:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="dialog/css/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css">
<link href="dialog/css/uidialog.css" rel="stylesheet" type="text/css" >
</head>
<body>
<a href="#" id="dialog-link" class="ui-state-default ui-corner-all">点击打开对话框</a>
<!-- ui-dialog -->
<div id="dialog" title="弹出层标题">
	<p>药药药切克闹 煎饼果子来一套</p>
</div>
</body>
</html>
<script src="dialog/js/jquery-1.7.2.min.js"></script>
<script src="dialog/js/jquery-ui-1.9.2.custom.min.js"></script>
<script>
   $(function() {
     // Link to open the dialog
     $( "#dialog-link" ).click(function( event ) {$( "#dialog" ).dialog( "open" );});
     //dialog style
     $( "#dialog" ).dialog({
       autoOpen: false,
       width: 400,
       buttons: 
       [
        {
          text: "确认",
          click: function() {
             $( this ).dialog( "close" );
          }
        },
        {
          text: "重置",
          click: function() {
            $( this ).dialog( "close" );
          }
        },
        {
          text: "取消",
          click: function() {
            $( this ).dialog( "close" );
          }
        }
       ]
    });
  });
</script>