介绍一个不错的JQuery弹出框组件

　　随着JQuery的流行， 出现了越来越多的JQuery插件，这些插件中JQuery的基础之上提供了更多定制化的功能，相信在我们平时做JS开发的时候，很多时候都会用到对话框，而最简单的办法就是调用浏览器自带的alert函数。使用这种方式虽然非常方便，但它呈现出的界面非常单一，不美观。所以现在我们看到很多网站上都有一些自己实现对话框的方法，使得用户体验大大提升。当然我们也不必自己去写一个这样的东西，现在就有一个很好的组件实现了这些需求，下面我就介绍一下JQuery Impromptu这个对话框插件。

它的官方网站在这里：http://trentrichardson.com/Impromptu/index.php

 

　　在我们引入了这个库之后，我们可以使用一个最简单的调用方式：

 

$.prompt('Example 1');

 

 

　　这行代码的效果如下：

 

 

　　

 

 

 

 

 

 

正如大家看到的，非常简单的代码就能构造出一个很不错的对话框，当然这个插件的功能不止这些，还能更加强大，下面我就再举几个例子。

　　我们还可以自定义对话框中显示的内容，甚至是定制我们自己的HTML，并且为对话框中的按钮指定回调事件：

var txt = 'Please enter your name:<br />
    <input type="text" id="alertName" 
    name="alertName" value="name here" />';
    
function mycallbackform(v,m,f){
    if(v != undefined)
    $.prompt(v +' ' + f.alertName);
}

$.prompt(txt,{
    callback: mycallbackform,
    buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});

 

 

　　运行效果如下：

　　 

 

　　当我们点击 Hey这个按钮之后，就会触发相应的回调事件，在我们的回调事件中，是弹出了另外一个对话框来显示问候信息：

　　

　　　　

 

      我们还可以通过改变它的CSS前缀来修改对话框的外观：

     

var brown_theme_text = '<h3>Example 13</h3>'+
    '<p>Save these settings?</p>'+

    '<img src="images/help.gif" alt="help" '+
    'class="helpImg" />';
$.prompt(brown_theme_text,{
    buttons:{Ok:true,Cancel:false}, 
    prefix:'brownJqi'
});

 

 

      效果如下：

 

     除此之外这个插件还有很多功能，就不一一列举，官网上面有很多详细的介绍，如果大家觉得这个插件不错的话，我将继续为大家整理相关的文档