js弹出层之1：JQuery.Boxy (二)

4.1、手动创建实例

<script type=”text/javascript”>
$(function() {
$(“#a1”).click(function() {
//实例化一个Boxy对象
var box1 = new Boxy(“<h3>这个参数是显示的内容</h3>” //显示内容
,
{
title: “标题”, //对话框标题
modal: false, //是否为模式窗口
afterHide: function(e) { alert(“dialog hide”); }, //隐藏时的回调函数
afterShow: function(e) { alert(“dialog show”); }, //显示时的回调函数
closeText: “X”, //关闭功能按钮的标题文字
draggable: true //是否可以拖动
});
box1.resize(300, 100); //设置对话框的大小
});
});
</script> <p>
<a href=”#” id=”a1″>4.1、手动创建一个实例</a>
</p>



测试发现modal为true为模式窗口，也就是背景被遮罩时就算设置 draggable: true拖动也是无效的。
5.1、常用对话框—提问框

//提问框
$(“#a2”).click(function() {
Boxy.ask(“凤姐最漂亮的部分是？”, //问题
[“脸皮”, “小嘴巴”, “知识渊博”], //可选项按钮
function(val) { alert(val) }, //回调方法
{title:”测试”,modal:false} //boxy属性设置
);
}); <p>
<a href=”#” id=”a2″>5.1、弹出提问框</a>
</p>


Boxy.ask(question, answers, callback, options)方法的4个参数question表示提问；answers提问选择项，一般为数组；callback为回调方法；options是boxy弹出框的的属性对象，见4.1。
5.2、常用对话框—警告框

//警告框
$(“#a3”).click(function() {
Boxy.alert(“这是警告信息”, //提示信息
function(val) { alert(val); }, //回调方法
{title:”提示”}); //boxy属性
}); <p>
<a href=”#” id=”a3″>5.2、警告框</a>
</p>


Boxy.alert(message, callback, options)方法的3个参数message表示警告信息；callback为回调方法；options是boxy弹出框的的属性对象，见4.1。
5.3、常用对话框—确认框

//确认框
$(“#a4”).click(function() {
Boxy.confirm(“你确认要看凤姐的照片吗？”, //确认提示信息
function() { alert(“上当了”) }, //点击确认后的回调信息