时间戳

首页 > 解决方案 > 如何使用 JavaScript 将按钮添加到 SharePoint 模式？

javascript - 如何使用 JavaScript 将按钮添加到 SharePoint 模式？

问题描述

我有一个模式要显示，它显示得很好。我正在尝试向模态添加一个按钮，该按钮应该触发 acceptTerms() 函数，存储 cookie，然后关闭模态。

我正在努力在模式上获得一个按钮。它添加了 HTML，我可以在源代码中看到它，只是没有出现。

我在 WebPart 中尝试过这样的事情：

var acceptBtn = '<input type="button" style="width:75px;" value="I Accept" onclick="acceptTerms()">';
$('body').append(acceptBtn);

这是 WebPart JS：

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
<script language="javascript" type="text/javascript">  
    $(document).ready(function() {  
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);  
});  

var agreed = document.cookie.replace(/(?:(?:^|.*;\s*)Acknowledged\s*\=\s*([^;]*).*$)|^.*$/, "$1");
if(!agreed) {
    function showModalPopUp() {  
    //Set options for Modal PopUp  
    var options = {  
        url: '/path/to/my/terms/page.aspx', //Set the url of the page  
        title: 'Terms', //Set the title for the pop up  
        allowMaximize: false,  
        autosize: true,
        showClose: true,  
        width: 600,  
        height: 400, 
    };  
    //Invoke the modal dialog by passing in the options array variable  
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);  
    return false;  
    }
}

function acceptTerms() {
    var d = new Date();
    var expire = new Date(d);
    expire.setDate(d.getDate() + 365);
    document.cookie = "Acknowledged=true; Path=/; Expires="+expire;
    SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes);
}

标签： javascriptsharepoint

解决方案

所以您正在使用一些选项来呈现模态，在选项中您定义要显示的 html

    网址：'/path/to/my/terms/page.aspx'

所以所有你想展示的 html 和 JS 逻辑都应该在这个页面中。

另一种方式，但我想不是最好的方法是使用 jQuery 技巧将按钮添加到模态布局（但请注意，这是相当不推荐的方式，因为 SharePoint 模态框架应该允许在定义的布局中显示您输入的 html，所以这不是修改布局的最佳选择。正如我之前所说，您的逻辑应该在您传递的html（aspx）页面中）所以诀窍是这样做：

     
      
        $(文档).ready(函数() {  
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);  
    });  

    var 同意 = document.cookie.replace(/(?:(?:^|.*;\s*)Acknowledged\s*\=\s*([^;]*).*$)|^.*$ /, "$1");
    如果（！同意）{
        函数 showModalPopUp() {  
             创建模态（）
             $("#dlgTitleBtns .ms-dlgCloseBtn").before("");
             $("#dialogTitleSpan").attr("style","width:auto;");
        }
    }

    函数 createModal()
    {
    //设置Modal PopUp的选项  
            变量选项 = {  
                url: '/path/to/my/terms/page.aspx', //设置页面的url  
                title: 'Terms', //设置弹窗的标题  
                允许最大化：假，  
                自动调整大小：真，
                显示关闭：真，  
                宽度：600，  
                身高：400，
            };  
            //通过传入options数组变量调用模态对话框  
            SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', 选项);
    }

    函数接受条款（）{
        var d = 新日期（）；
        var expire = new Date(d);
        expire.setDate(d.getDate() + 365);
        document.cookie = "Acknowledged=true; Path=/; Expires="+expire;
        SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Yes);
    }

或类似的东西:)...请注意我没有对此进行测试，但这应该让您了解该方法。可以在这里找到类似的解决方案 ->链接

推荐阅读