Как добавить кнопку в SharePoint Modal с помощью JavaScript?

Question

У меня есть модал для отображения, он отображается нормально. Я пытаюсь добавить кнопку к модалу, кнопка должна запустить функцию acceptTerms (), сохранить куки и затем закрыть модал.

Я изо всех сил пытаюсь получить кнопку на модале. Он добавляет 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);
}  

Answer 1

поэтому Вы представляете модал с некоторыми опциями, в опциях Вы определяете html, который хотите показать

    url: '/path/to/my/terms/page.aspx'

, поэтому все html, которые вы хотите показать, и логика JS с ним должны быть на этой странице.

другой способ, но я думаю, что не самый лучший подход - это добавить кнопку к модальному макету с помощью трюка jQuery (но учтите, что это скорее не рекомендуемый способ, так как модальная структура SharePoint должна позволять показыватьВы вводите html в определенном макете, поэтому это не лучший вариант для изменения макета. Ваша логика, как я уже говорил, должна быть на странице html (aspx), которую вы передаете), поэтому хитрость заключается в следующем:

     
      
        $(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() {  
             createModal()
             $("#dlgTitleBtns .ms-dlgCloseBtn").before("");
             $("#dialogTitleSpan").attr("style","width:auto;");
        }
    }

    function createModal()
    {
    //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); 
    }

    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);
    }  

или что-то подобное:) ... пожалуйста, учтите, что я не проверял это, но это должно дать вам представление о подходе. Аналогичное решение можно найти здесь -> ссылка