EasyMvc入门教程-高级控件说明（18）弹出框控件

前面两节介绍了信息框与对话框，实际开发中如果我们遇到更复杂的要求，比如要求在弹出框里显示另外的网址，如下所示：



实现代码如下：

@Html.Q().Popup().Text("我可以嵌套网页").ContentOrUrl("http://zwc.cn").AutoShow().AsFrame()

当然了，弹出框还是支持事件回调的，并且更高级，如下例所示：



并且我们仍然可以对这些自定义按钮绑定事件，如下所示：

@Html.Q().Popup().Id("p").Text("我是普通弹出框").ContentOrUrl("http://baidu.com").AutoShow().CustomButtons(new List<PopupButton>()
{
new PopupButton(){Text = "上一步", Event = "last"},
new PopupButton(){Text = "下一步", Event = "next"},
new PopupButton(){Text = "取消", Event = "cancel"}
})

<script>
function last() {
layer.msg("您点击了上一步");
}

function next() {
layer.msg("您点击了下一步");
}

function cancel() {
layer.msg("您点击了取消");
}
</script>

另外，弹出框支持8方向位置显示，以常见的右下方显示为例：

代码如下：

@Html.Q().Popup().Text("我是普通弹出框").ContentOrUrl("可以弹出一些提醒消息不。。").AutoShow().PositionRightBottom().Width(200).Height(200).ShowShade(false)

效果如下：



总结：弹出框用在略微复杂的场合，支持自定义按钮和自定义位置显示，需要您根据场合进行选择使用。

更多使用示例请浏览在线示例：http://core.zwc.cn