Jun 07, 2013, 7:51 AM
[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.
below code is being used for showing popup.
of course to get main page container id I have changed below line
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]