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

最新推荐文章于 2021-08-05 14:11:12 发布

CF西西

最新推荐文章于 2021-08-05 14:11:12 发布

阅读量3.6k

点赞数

分类专栏： ajax库文章标签： mvc 框架 stylesheet function javascript string

本文链接：https://blog.csdn.net/xiaoguang44/article/details/6618253

版权

ajax库专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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种弹出方法。