hiAlert漂亮的对话框插件

厌烦了IE浏览器的警告窗，伴随着“咚”恐惧的一声，让人感觉好像有一种坏事情即将来临。而如今各浏览器对网页的弹出警告框(alert)、确认对话框(confirm)、输入框(prompt)显示效果不一，本文借助hiAlert插件来为您统一网页的对话框风格。

分类：悬浮层/弹出层 > 对话框难易：初级

查看演示下载资源下载积分： 30 积分

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='http://www.sucaihuo.com/js/61.html' target='_blank'>jNotify漂亮的提示插件</a>。