sharepoint
Trabajar con cuadros de diálogo modales con JavaScript

.NET Framework ASP.NET C# Language CSS HTML JavaScript jQuery PowerShell Microsoft SQL Server VBA

Sintaxis

var options = SP.UI. $ create_DialogOptions ();
var modalDialog = SP.UI.ModalDialog.showModalDialog (opciones);

Parámetros

opciones de propiedad	Descripción
título	Una cadena que contiene el título del diálogo.
url	Una cadena que contiene la URL de la página que aparece en el cuadro de diálogo. Se debe especificar url o html . url tiene prioridad sobre html .
html	Un elemento HTML para mostrar dentro del diálogo.
X	El desplazamiento x del diálogo como un valor entero.
y	El desplazamiento de y del diálogo como un valor entero.
anchura	El ancho del diálogo como un valor entero. Si no se especifica y el tamaño automático es falso, el ancho se establece en 768 px
altura	La altura del diálogo como un valor entero. Si no se especifica y el tamaño automático es falso, la altura se establece en 576px
permitir maximizar	Un valor booleano que especifica si se debe mostrar el botón Maximizar .
showMaximized	Un valor booleano que especifica si el cuadro de diálogo se abre al máximo.
showCerrar	Un valor booleano que especifica si el botón Cerrar aparece en el cuadro de diálogo.
tamaño automático	Un valor booleano que especifica si la plataforma de diálogo controla el tamaño del diálogo automáticamente.
dialogReturnValueCallback	Un puntero a función que especifica la función de devolución de devolución de llamada. La función toma dos parámetros: un dialogResult de tipo SP.UI.DialogResult Enumeration, y un objeto returnValue que contiene los datos devueltos por el diálogo.
args	Un objeto que contiene datos que se pasan al diálogo.

Observaciones

El espacio de nombres SP.UI.ModalDialog se introdujo en el Modelo de objetos de JavaScript con SharePoint 2010, y está disponible en versiones posteriores de SharePoint 2013, Office365 y 2016.

Materiales de referencia adicionales:

Realizar una acción cuando un cuadro de diálogo está cerrado

SP.SOD.executeOrDelayUntilScriptLoaded(showDialog,"sp.js");

function showDialog(){
    var options = SP.UI.$create_DialogOptions();
    options.url = "/mySite/lists/myList/NewForm.aspx";
    options.dialogReturnValueCallback = myCallBackFunction;
    SP.UI.ModalDialog.showModalDialog(options);    
    function myCallBackFunction(result,data){
        switch(result){
            case SP.UI.DialogResult.invalid: 
                alert("The dialog result was invalid"); 
                break;
            case SP.UI.DialogResult.cancel: 
                alert("You clicked cancel or close"); 
                break;
            case SP.UI.DialogResult.OK: 
                alert("You clicked OK, creating an item in the list."); 
                break;
        }
    }
}

Mostrar una página existente en un diálogo

SP.SOD.executeOrDelayUntilScriptLoaded(showDialog,"sp.js");

function showDialog(){
    SP.UI.ModalDialog.showModalDialog(
        { url: "/org/it/web/wik/Lists/ExampleCode/DispForm.aspx?ID=6" }
    );
}

Mostrar un diálogo personalizado

SP.SOD.executeOrDelayUntilScriptLoaded(showDialog,"sp.js");

function showDialog(){
    var dialogOptions = SP.UI.$create_DialogOptions();
    dialogOptions.title = "Your Title Here!";
    var dummyElement = document.createElement("div");
    dummyElement.style.textAlign = "center";
    dummyElement.appendChild(document.createElement("br"));
    dummyElement.appendChild(document.createTextNode("Some beautifully crafted text."));
    dummyElement.appendChild(document.createElement("br"));
    dialogOptions.html = dummyElement;
    SP.UI.ModalDialog.showModalDialog(dialogOptions);    
}

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow