sharepoint 模式化窗体

最新推荐文章于 2020-05-05 21:19:24 发布

原创最新推荐文章于 2020-05-05 21:19:24 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在SharePoint中实现A页面弹窗显示B页面内容及模式化窗口的创建与使用，包括自定义视图、传参与关闭机制，以及在A页面内弹出特定DIV的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sharepoint 学习笔记汇总

http://blog.youkuaiyun.com/qq873113580/article/details/20390149

1，在A页面弹窗显示B页面里面的内容

在A页面引用JS脚本，sp自带的

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <SharePoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></SharePoint:ScriptLink>
    <SharePoint:FormDigest ID="FormDigest1" runat="server" />

//自定义视图
        function customView() {
            var options = {
                url: "/_layouts/15/Manage/FilterViewUser.aspx",
                title: "自定义视图",
                dialogReturnValueCallback: CopCloseCallback
            };
            SP.UI.ModalDialog.showModalDialog(options);
        }
        //回调函数--result是B页面返回过来的值
        function CopCloseCallback(result, value) {
            if (result == SP.UI.DialogResult.OK) {
               //do something
            }
        }

B页面传值并且关闭模式化窗体

Page.ClientScript.RegisterStartupScript(Page.ClientScript.GetType(), "myscript", "<script  type='text/javascript'>window.frameElement.commitPopup('');</script>");

window.frameElement.commitPopup(''“)就是关闭的代码括号里写值 A页面就能在result里面接受到

2，弹出A页面里面的DIV

先引用一个程序集


<%@ Register Assembly="AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>


引用自带的模式化JS
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <SharePoint:ScriptLink ID="ScriptLink1" Name="sp.ui.dialog.js" LoadAfterUI="true" Localizable="false" runat="server"></SharePoint:ScriptLink>
    <SharePoint:FormDigest ID="FormDigest1" runat="server" />

定义需要模式化弹出的DIV

<asp:Panel ID="Panel3" runat="server" Style="display: none;">
        <asp:Panel ID="Panel4" runat="server" Height="200" Width="750" CssClass="modalPopup">
            <div id="divSearchDefault">
                <table>
                    <tr class="heightTr">
                        <td style="text-align: right; width: 100px;">驳回原因：</td>
                        <td>
                            <textarea id="txtReturnMsg" runat="server" cols="20" rows="6"></textarea>
                        </td>
                    </tr>
                    <tr style="height: 60px;">
                        <td></td>
                        <td>
                            <asp:Button runat="server" Text="驳回" OnClientClick="return reject();" OnClick="btnReject_Click" Style="margin-left: 0px;" />
                            
                            <asp:Button ID="btnCancel" runat="server" Text="取消" Style="margin-left: 20px;" />
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
    </asp:Panel>

弹出模式化窗体

<asp:Button ID="btnReject" runat="server" Text="驳回" Style="margin-left: 30px;" />
                            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                                        TargetControlID="btnReject" PopupControlID="Panel3" BackgroundCssClass="bg"
                                        CancelControlID="btnCancel"
                                        DropShadow="false" Drag="true" PopupDragHandleControlID="Panel4">
                                    </cc1:ModalPopupExtender>

样式

<style type="text/css">
        /*模式化背景样式*/
        .bg {
            position: absolute;
            z-index: 100;
            top: 0px;
            left: 0px;
            background-color: rgb(153, 153, 153);
            filter: alpha(opacity=40);
            -moz-opacity: 0.6;
            opacity: 0.4;
        }
        /*模式化DIV样式*/
        .modalPopup {
            background-color: #ffffdd;
            border-width: 3px;
            border-style: solid;
            border-color: Gray;
            padding: 3px;
            width: 250px;
        }
    </style>

效果图

使用要点