HTML

hiAlert提供了五种方法可以使用：

<div class="demo">
    <h3>
        1、警告框
    </h3>
    <p>
        <a href="#" id="a1">
            点击这里
        </a>
    </p>
</div>
<div class="demo">
    <h3>
        2、确认框
    </h3>
    <p>
        <a href="#" id="a2">
            点击这里
        </a>
    </p>
</div>
<div class="demo">
    <h3>
        3、输入框
    </h3>
    <p>
        <a href="#" id="a3">
            点击这里
        </a>
    </p>
</div>
<div class="demo">
    <h3>
        4、网页框
    </h3>
    <p>
        <a href="#" id="a4">
            点击这里
        </a>
    </p>
</div>
<div class="demo">
    <h3>
        5、提示条
    </h3>
    <p>
        <a href="#" id="a5">
            点击这里
        </a>
    </p>
</div>

jQuery

$(function() { $("#a1").click(function() { hiAlert("欢迎来到sucaihuo.com", "提示"); }); $("#a2").click(function() { hiConfirm('你确认此操作吗?', '确认框', function(r) { hiOverAlert('你的反馈是: ' + r); }); }); $("#a3").click(function() { hiPrompt('请填写:', '默认值', '输入框', function(r) { if (r) hiOverAlert('你填入的内容是“' + r + '”'); }); }); $("#a4").click(function() { hiBox('#showbox', '标题', 400, '', '', '.a_close'); }); $("#a5").click(function() { hiOverAlert('操作提示条信息', 1500); }); });

若需要拖动对话框效果，则需要载入jquery.ui.draggable.js，可以到jqueryui.com了解详情。类似DEMO效果，点击查看<a href='https://jy.tp.yuanmeng.life/js/61.html' target='_blank'>jNotify漂亮的提示插件</a>。