Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Javascript Ajax C#4.0 , +
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
good
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>
    <title></title>
</head><pre lang="Javascript"></
<script>
    
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
el.style.left = x + "px";
el.style.top = y + "px";
el.style.display = "block";
document.getElementById( 'wrapupDiv' ).innerHTML = document.getElementById( divName ).innerHTML;
}
</script><pre>
<body>
    <table><tr><td style="font-family:Calibri;font-size:medium">Sample page to display a Javascript Popup using HTML Div</td></tr>
    <tr>
    </tr>
    <tr><td>
        <input type="button" value="Show First Div"  önclick="showPos(event,'firstDiv')" />
        <input type="button" value="Show Second Div"  önclick="showPos(event,'secondDiv')" /></td></tr>
    </table>
    
    <div id="firstDiv" style="display:none; ">
        First Div contents
    </div>
  <div id="secondDiv" style="display: none;">
        Second Div contents
  </div>
    <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">
    </div>
</body> 
</html>
  Permalink  
v2

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



Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 30 Nov 2012
Copyright © CodeProject, 1999-2014
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