duDialog是一款简洁自适应弹出层提示框选择器插件-BFW插件库

duDialog是一款简洁自适应弹出层提示框选择器插件

duDialog是一款简洁自适应弹出层提示框选择器插件，无需外部依赖，开箱即用。

使用方式：

第一步引入插件及css

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/duDialog.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/duDialog.css">

第二步调用方法

显示一个alert提示框；

 new duDialog('Alert Message', 'This is an alert message.');//

弹出一个确认框并且定义按钮点击回调函数；

 new duDialog('Notice', 'Are You Sure?', duDialog["OK_CANCEL"], {

         okText: 'Okey',
         callbacks: {
             okClick: function() {
                 //点击Okey的回调
                 this["hide"]();
             }
         }
     });

弹出一个列表选择框，并定义选择回调函数，回调函数第一个值是event，第二值是用户选择的值。

 new duDialog('Select An Item', ['CSS', 'JQUERY', 'VUE'], {
         selection: true,
         callbacks: {
             itemSelect: function(event, selectedvalue) {
                 console.log(event);
                 alert(selectedvalue);
             }
         }
     });

完整代码：

<!doctype html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/duDialog.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/duDialog.css">
    <style>
        .container {
            margin: 150px auto;
            max-width: 728px;
        }
    </style>
</head>

<body>


    <div class="container">
      

        <button id="alert">Alert</button>
        <button id="confirm">Confirm</button>
        <button id="selection">Multi Selection</button>
    </div>


    <script>
        $('#alert').on('click', function() {
     new duDialog('Alert Message', 'This is an alert message.');
 })
 $('#confirm').on('click', function() {
     new duDialog('Notice', 'Are You Sure?', duDialog["OK_CANCEL"], {

         okText: 'Okey',
         callbacks: {
             okClick: function() {
                 //点击Okey的回调
                 this["hide"]();
             }
         }
     });
 })
 $('#selection').on('click', function() {
     new duDialog('Select An Item', ['CSS', 'JQUERY', 'VUE'], {
         selection: true,
         callbacks: {
             itemSelect: function(event, selectedvalue) {
                 console.log(event);
                 alert(selectedvalue);
             }
         }
     });
 })
    </script>


</body>