locked
Popup Window in sharepoint2010 RRS feed

  • Question

  • Hi , how to display an popup window with ok,cancle .when i click an ok then go to next page .please tell me code

    Thursday, January 19, 2012 12:09 PM

Answers

  • You need to use javascript's window.confirm. But since you posted here, seems you're working with SharePoint and hence, you might want to check the SharePoint 2010 Dialog Framework.

    Yousef

    • Marked as answer by GuYuming Tuesday, January 24, 2012 8:48 AM
    Thursday, January 19, 2012 12:16 PM

All replies

  • You need to use javascript's window.confirm. But since you posted here, seems you're working with SharePoint and hence, you might want to check the SharePoint 2010 Dialog Framework.

    Yousef

    • Marked as answer by GuYuming Tuesday, January 24, 2012 8:48 AM
    Thursday, January 19, 2012 12:16 PM
  • Hi,

    You can use SharePoint modal dialog feature for this.

    function portal_openModalDialog() {
        var options = SP.UI.$create_DialogOptions();
        options.width = 100;
        options.height = 200;
        options.url = "/PathToYourNewPage.aspx";
        options.dialogReturnValueCallback = Function.createDelegate(
                            null, modalDialogClosedCallback);
        SP.UI.ModalDialog.showModalDialog(options);
    }


    You can place the above code on your page and call for the method portal_openModalDialog() so  that will open up the popup t hat you window, with the page that you have specified in the options.url section.

    When you click the ok button this method will look for a  method with the name modalDialogClosedCallback.

    function modalDialogClosedCallback(dialogResult, returnValue) { 
          // javascript page redirection goes here.
    } 

    What you need to do is to implement that method like above and put the javascript to do the page redirection.

    Regards,

    Kamil

    • Proposed as answer by romeo donca Thursday, January 19, 2012 12:58 PM
    Thursday, January 19, 2012 12:49 PM
  • Hi,

    You need to use SharePoint's Modal Dialog.

    Step 1: Add files of JavaScript (SP.js, SP.Ribbon, SP.Core.js) for the object model found at location %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS

    Step 2: Use 'SP.UI.ModalDialog.showModalDialog' to open dialog box.

    Step 3: Here is sample method of Open Dialog.

    function openDialog() {
    var options = {
    url: "../../Lists/Sample%20Dialog/DispForm.aspx",
    width: 800,
    height: 600,
    title: "Sample Dialog",
    };
    SP.UI.ModalDialog.showModalDialog(options);
    }

    As hardcoding of url is not a best practice, so better approach is we can cache the DOM element in a global variable.

    Our Code looks like this:

    1. Adding HTML for our pop up page.

    <div id="SampleDialogDetails">
    <input type="button"
    value="OK"
    onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked');
    return false;"
    class="ms-ButtonHeightWidth"
    target="_self" />
    <input type="button"
    value="Cancel"
    onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,'Cancel clicked');
    return false;"
    class="ms-ButtonHeightWidth"
    target="_self" />
    </div>

    2. OpenDialog code:

    var SampleDialogDetails;
    
    Sys.onReady(function () {
    SampleDialogDetails= document.getElementById("SampleDialogDetails");
    ...
    });
    
    function openDialog() {
    var options = {
    html: SampleDialogDetails,
    width: 800, height: 600, title: "Sample Dialog", };
    SP.UI.ModalDialog.showModalDialog(options);
    }
    
    
    function onDialogClose(dialogResult, returnValue) { if (dialogResult == SP.UI.DialogResult.OK) { alert('goodbye world!'); } if (dialogResult == SP.UI.DialogResult.cancel) { alert(returnValue); } }

    You can also pass other parameters as given below based on your requirement:

    - width: Set the width of the modal dialog

    - height: Set the height of the modal dialog

    - html: the ID HTML control or HTML content to be displayed in modal dialog

    - url: Page url or relative path

    - dialogReturnValueCallback: In case we want some code to run after the dialog is closed, set JavaScript method name

    - allowMaximize: Set to true or false to show hide this option.

    - showClose: Set to true or false to show or hide the close button

    Hope this helps you.

    Good Luck!

    Anu



    • Edited by Anusuya Goud Thursday, January 19, 2012 1:15 PM
    • Proposed as answer by Anusuya Goud Thursday, January 19, 2012 1:38 PM
    • Unproposed as answer by Anusuya Goud Thursday, January 19, 2012 1:39 PM
    Thursday, January 19, 2012 1:04 PM
  • Thanks. if u dont may please send me where u write this code in step by step
    Thursday, January 19, 2012 1:19 PM
  • Hi this code is conformation message examples.with ok and cancle.when i click an ok go to next page and  when click on cancle go to home page

    <script language="javascript" type="text/javascript" >
        function jumpto() {
            {
                var confirmLeave = confirm('sucessfully Submit');
                if (confirmLeave == true) {
                    document.location.href = "Nextpage.aspx";
                }
                else {
                    document.location.href = "homepage.aspx";
                }
            }
        }
    </script>

    <button type="button" onclick="jumpto()" id="btnpop"> submit</button>

    Thursday, February 9, 2012 9:58 AM
  • Hi,

    I know that answer is already given. However i have consolidated all popup related things and made article. It consist below things:-

    - Custom framework which use OOB sharepoint 2010 dialog framework.
    - one user control for popup. If you need 10 popup in your application then just create normal 10 dotnet user control. Thats it. Rest my custom framework will take care to load them into popup screen.
    - It explain, how to call C# event of main page from popup screen on ok or cancel button.
    - It explain, how to call javascript of main page from popup screen on ok or cancel button.
    - two sample control; 1 for main page and 2nd for popup screen
    - In last i provide the link to download all source code files


    Here is my article:-
    http://sharepoint.infoyen.com/2012/10/24/sharepoint-2010-popup-dialogs/


    Thanks & Regards,
    Avinash
    My Blog: http://sharepoint.infoyen.com/



    • Edited by Avinash Dad Thursday, October 25, 2012 2:26 PM
    Thursday, October 25, 2012 2:22 PM