dialog.js实现一个es6弹出层对话框效果代码-html代码-BFW代码库

dialog.js实现一个es6弹出层对话框效果代码

代码语言：html

所属分类：弹出层

代码描述：dialog.js实现一个es6弹出层对话框效果代码，可弹出提示框、确认框、iframe框、输入框、自定义框。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <meta charset="utf-8">
    <title>ES6对话框网页小部件</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/dialog.esm.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/dialog-simple.css">
    <style>
        body {
            font-family: 'Open Sans';
        }
    </style>
</head>

<body>

    <h1>ES6对话框网页小部件</h1>

    <button onclick="doSimpleAlert()">Simple alert</button>
    <br> <br>
    <button onclick="doAlert()">Alert with caption</button>
    <br> <br>
    <button onclick="doConfirm()">Confirm</button>
    <br> <br>
    <button onclick="doTemplate()">Template</button>
    <br> <br>
    <button onclick="doIframe()">iframe</button>
    <br> <br>
    <button onclick="doUserDefine()">User define</button>

    <div id="tpl" style="display: none;">
        Input name then close: <input class="name" placeholder="Please input nemo">
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dialog.esm.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dialog-polyfill.js"></script>
    <script>
        function doSimpleAlert() {
            Dialog.alert('Hello Dialog!');
        }

        function doAlert() {
           .........完整代码请登录后点击上方下载按钮下载查看