Click here to Skip to main content
Rate this: bad
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
Your Filters
0 Shai Vashdi 1,518
1 Manas Bhardwaj 319
2 Tadit Dash 285
3 OriginalGriff 273
4 Peter Leow 205
0 Sergey Alexandrovich Kryukov 9,530
1 OriginalGriff 5,716
2 Peter Leow 4,345
3 Maciej Los 3,540
4 Abhinav S 3,373

Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 30 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid