[CLOSED] How to show overlay popup on whole page instead of Iframe area?

  1. #1

    [CLOSED] How to show overlay popup on whole page instead of Iframe area?

    Hi,

    In one of my pages I have tab panel as below. In this tab panel I am loading each tab with a partial view with mode as frame as shown below.

     @(Html.X().TabPanel().ID("tabPnlGoalManager").Padding(0).Listeners(ls => ls.TabChange.Fn = "HideGlobalSaveButton")
                  .Height(500).OverflowX(Overflow.Hidden).OverflowY(Overflow.Hidden)
                  .Items(
                         Html.X().Panel().ID("pnlTextView").Title("Text View")
                                 .Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
                                                                            .Url(Url.Action("GoalTextView", "Talent"))
                                                                            .Mode(LoadMode.Frame)
                                                                            .Params(new { id = Session["GoalID"] })
                                                                   )
                                       ),
                         Html.X().Panel().ID("pnlDiagramView").Title("Diagram View")
                                 .Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
                                                                            .Url(Url.Action("GoalObjectHierarchy", "Talent"))
                                                                            .Mode(LoadMode.Frame)
                                                                            .Params(new { id = Session["GoalID"] })
                                                                   )
                                       ),
                         Html.X().Panel().ID("pnlLinkedHierarchies").Title("Linked Hierarchies")
                                 .Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
                                                                            .Url(Url.Action("LinkedHierarchies", "Talent"))
                                                                            .Mode(LoadMode.Frame)
                                                                            .Params(new { id = Session["GoalID"] })
                                                                            )
                                       ),
                         Html.X().Panel().ID("pnlLinkedProjects").Title("Linked Projects")
                                 .Items(Html.X().Container().MarginSpec("20px 0 0 0").Loader(Html.X().ComponentLoader()
                                                                            .Url(Url.Action("LinkedProjects", "Talent"))
                                                                            .Mode(LoadMode.Frame)
                                                                            .Params(new { id = Session["GoalID"] })
                                                                            )
                                       )
                        )
    
         )
    Now the issue is when I am showing overlay popup from these partial views.......overlay is only coming on respective tab area and not showing on complete page(main page). Please suggest a way to resolve this.

    below code is being used for showing popup.

     $('.add-goal-objects').click(function (event) {
                $("#myModal").reveal();
                $(".reveal-modal-load").empty();
                Ext.net.directRequest({
                    url: '@(Url.Action("AddGoal", "Talent"))',
                    extraParams: { "goalId": null, containerId: Ext.get(Ext.query(".reveal-modal-load")[0]).id }
                });
            });
    Container div in partial page and its related script as below.

    <div id="myModal" class="reveal-modal">
        <div class="reveal-modal-load">
        </div>
        <a class="close-reveal-modal">x</a>
    </div>
    <script src="@Url.Content("~/Scripts/javascripts/foundation/jquery.foundation.reveal.js")" type="text/javascript"></script>
    If I put container div in main page , Popup is not being shown even though I am bale to get container Id .
    of course to get main page container id I have changed below line

    Ext.get(Ext.query(".reveal-modal-load")[0])
    To

    Ext.get(Ext.query(".reveal-modal-load",window.parent.document)[0])
    Let me know if you need further clarification.
    Last edited by Daniil; Jun 10, 2013 at 6:19 AM. Reason: [CLOSED]
  2. #2
    Hi @alscg,

    You should create a window inside an iframe's parent page, not inside an iframe itself.

    Here is how it can be done using an Ext.NET Window.
    http://forums.ext.net/showthread.php?9935#post39571

    I am not sure how it should be done with JQuery.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @alscg,

    You should create a window inside an iframe's parent page, not inside an iframe itself.

    Here is how it can be done using an Ext.NET Window.
    http://forums.ext.net/showthread.php?9935#post39571

    I am not sure how it should be done with JQuery.
    Danill,
    I did not get you. Could you please correct my code?
    Last edited by alscg; Jun 07, 2013 at 1:00 PM.
  4. #4
    Well, this is still actual.
    Quote Originally Posted by Daniil View Post
    I am not sure how it should be done with JQuery.
    But I think that you have to place the myModal div into the parent page and define a JavaScript function which creates a pop-up window also in the parent page. When you can call this function from the iframe page this way.
    parent.createWindow(/* parameters */);
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, this is still actual.


    But I think that you have to place the myModal div into the parent page and define a JavaScript function which creates a pop-up window also in the parent page. When you can call this function from the iframe page this way.
    parent.createWindow(/* parameters */);
    Thanks danill. Now it is working. I have implemented as you suggested above. This can be closed.

Similar Threads

  1. [CLOSED] How to show ext:Window on Parent page in Nested page
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 09, 2012, 2:33 PM
  2. Replies: 1
    Last Post: Feb 03, 2012, 2:36 PM
  3. Window overlay entire Portal page
    By JsonTerre in forum 1.x Help
    Replies: 1
    Last Post: Mar 28, 2011, 11:47 AM
  4. Replies: 3
    Last Post: Feb 03, 2010, 10:11 AM
  5. Add TabPanel Main Page with Viewport
    By Maia in forum 1.x Help
    Replies: 4
    Last Post: Dec 10, 2009, 10:41 PM

Posting Permissions