MVC2的框架下，使用ColorBox弹出的几种用法

来源：互联网发布：linux就改这么学编辑：程序博客网时间：2024/05/23 13:24

0.需加载colorbox的库文件与样式

<script src="/Content/scripts/jquery/jquery.colorbox-min.js" type="text/javascript"></script><link href="/content/appoint/colorbox.css" rel="stylesheet" type="text/css" media="screen" />

一.1.内置对象colorbox弹出（写在同一个页面里面），这是一个预先隐藏的页面，当触发事件后，利用colorbox插件将其嵌套并显示出来。

    <div style='display: none'>        <div id='inline_comment' style='padding: 10px; background: #fff'>            <ul class="comment-box">                <a name="ques-btn"></a>                <li>                    <p>                        <strong> 您的评论：</strong></p>                    <textarea id="commentBody" class="comment-input" name="content" cols="" rows=""></textarea></li>                <li><a href="javascript:submitComment();" style="width: 108px; margin-top: 8px; height: 26px;                    display: block; border: none; cursor: pointer;">                    <img src="/Content/images/button/btn-forum-comment.jpg" alt="" /></a> </li>            </ul>            <br />        </div>    </div>

2.通过SCRIPT触发事件，点击页面上的按钮（绑定一个函数，当函数触发时弹出colorbox）。

function jumpComment() {                    $("#makeComment").colorbox({ width: "45%", inline: true, href: "#inline_comment" });                    $("#makeComment").click();}

二.1.点击页面后弹出colorbox，这是网页页面上的代码。

 <td id="seeDetail1"><a href="/bbb/aaa?Id=<%=item.Id %>" id="seeDetail2" >查看详情</a> <a href="/bbbr/nnn?Id=<%=item.Id %>">立即支付</a><br />                <a href="/eee/CancelOrder?customId=<%= item.CustomId %>">取消订单</a></td>

2.script中绑定触发函数

 <script type="text/javascript">     $(document).ready(function () {         $("#seeDetail1 #seeDetail2").colorbox({ iframe: true, innerWidth: 740, innerHeight: 360 });     }); </script>

3.定义Controller，触发函数后，系统会经由controller中定义的action一路执行代码逻辑。

   public ActionResult OrderDetail(string Id)        {            if (!String.IsNullOrEmpty(Id))            {                string itemId = Id;                long orderId = Convert.ToInt64(itemId);                Order orderDetail = OrderQueryService.FindOrderById(orderId);                ViewData["orderDetail"] = orderDetail;            }                       return View();        }

4.定义弹出的页面

如是，以上是常用的2种弹出方法。