Monday, 20 February 2017

SharePoint Model Dialog PopUp

Example - 1

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
//User Defined Function to Open Dialog Framework
function OpenDialog() 
{
var element = document.createElement('div');
element.innerHTML = '<html><head><style>body {background-color: yellow;}</style></head><body><input type="text" id="popupTextBox"/><table><tr><td>name</td><td>'+$('#popup').val()+'</td></tr><tr><td>name</td><td><input type="button" value="OK" onclick="SaveForm()" />&nbsp;<input type="button" value="Cancel" onclick="CancelForm()"/></td></tr></table></body></html>';
  var dialogOptions = SP.UI.$create_DialogOptions();
 dialogOptions.html=element;
  dialogOptions.title = $('#popup').val();
  dialogOptions.allowMaximize= true;
  dialogOptions.args={ arg1: 'The second argument is ', arg2: 12345 };
  dialogOptions.style='background-color:green';
  dialogOptions.width = 500; // Width of the Dialog
  dialogOptions.height = 250; // Height of the Dialog
dialogOptions.dialogReturnValueCallback=CloseCallback;
  //SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
   SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions); 
  test();
 // DoSomethingWithArgs();
  return false;
  
}

// Dialog close event capture function
function CloseCallback(strReturnValue, target) 
{
  if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
    {
   alert("User clicked Ok!");
  // RefreshOnDialogClose(); it will close popup and refresh the parent page
    }
  if (strReturnValue === SP.UI.DialogResult.cancel) // Perform action on Cancel.
   {
  alert("User clicked cancel!");

   }
}
//Close popup on cancel button click

        function SaveForm() {

          SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK,'Ok Clicked');

        }

        //Commit/Refresh parent window on save button click

        function CancelForm() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'cancel Clicked');
      // window.parent.location('https://lntanjana.sharepoint.com/SitePages/WebpartDemo.aspx');// it will redirct to specifice page after closing the popup

        }
function test()
{
//alert("hi");
txtVal=$('#popup').val();
 $('#popupTextBox').val(txtVal);
}
function DoSomethingWithArgs() {

  var passedArgs = SP.UI.ModalDialog.get_childDialog().get_args(); /* get access to the passed parameters */

  alert(passedArgs.arg1 + passedArgs.arg2);

}

</script>
<input type="text" id="popup"/>
<a onclick="OpenDialog();">open dialog</a>
-----------------------------------------------------------------------------------------------------------------------
Example - 2 

<html>
<head>
<script type="text/javascript">
function init()
{
    popupWin = window.open('','popupWin','');
    popupWin.document.writeln('<html><head><title>test</title></head><body><input type="text" id="popupTextBox"/></body></html>');
    popupWin.document.close();
    popupText = popupWin.document.getElementById("popupTextBox");
    parentText = document.getElementById("parentTextBox");
    transferText();
}
function transferText()
{
    popupText.value = parentText.value
}
</script>
</head>
<body>
<input type="text" id="parentTextBox"/>
<input type="button" onclick="init();"/>
</body>
</html>

No comments:

Post a Comment