Click here to Skip to main content
13,044,935 members (43,728 online)
Rate this:
Please Sign up or sign in to vote.
How to set popupcontrolid through javascript before calling .show() method?
My requirement is to use a single modal dialog for displaying multiple panels,
I have 5 buttons in my screen , on click , each button few fields are displayed to make a choice, I included those fields in different panels one for each button, but how can I dynamically show a particular panel at a time in modal popup without using multiple modal popups?

any suggestion is appreciated
Posted 30-Nov-12 1:32am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

You can achieve it by showing / hiding a Div , and changing its contents with the respective panel. See below the sample code. You can add additional features to the Div to close, minimize etc...

<pre lang="HTML"><html>
</head><pre lang="Javascript"></
function showPos(event, divName) {
var el, x, y;
el = document.getElementById( 'wrapupDiv' );
if (window.event) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop +
+ document.body.scrollTop;
else {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
x -= 2; y -= 2;
y = y+15 = x + "px"; = y + "px"; = "block";
document.getElementById( 'wrapupDiv' ).innerHTML = document.getElementById( divName ).innerHTML;
    <table><tr><td style="font-family:Calibri;font-size:medium">Sample page to display a Javascript Popup using HTML Div</td></tr>
        <input type="button" value="Show First Div"  önclick="showPos(event,'firstDiv')" />
        <input type="button" value="Show Second Div"  önclick="showPos(event,'secondDiv')" /></td></tr>
    <div id="firstDiv" style="display:none; ">
        First Div contents
  <div id="secondDiv" style="display: none;">
        Second Div contents
    <div id="wrapupDiv" style="display: none; removed: absolute; removed 100px; removed 50px;<br mode="hold" />        border: solid black 1px; padding: 10px; background-color: Gray; text-align: justify;<br mode="hold" />        font-size: 12px; width: 500px; height: 300px">

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 30 Nov 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100