hi friends,

I need your help............. I have a div content in my home page.while clicking on that div i need a modal window... i have done that using jquery. In that modal window i need to call accordion java script for sliding menu.... and again i need to use a tab menu with fading effect.. i need all these in the same modal window..... Does any one know how to incorporate all these things in to one page..............

Please help me

Recommended Answers

All 3 Replies

Well the only thing you need for a modal window is two divs, and outer div to make the page modal and an inner div to hold the modal content. For example

<html>
<head>
<title>Blah</title>
<style type='text/css'>
   .modal
   {
      z-index:998;
      height:100%;width:100%;
      position:absolute;
      left:0px;top:0px; 
   }
   .modalContent{  z-index:999; }
</style>
</head>
<body>
   <div id='hello'>
       <a href='#'>You can't click on me!</a>
   
        <div id='modal' class='modal'>
            <div id='modalContent' class='modalContent'>
               <a href='#'>You can click on me though!</a>
            </div> <!-- end modal content div -->
        </div> <!-- end modal div -->
    </div><!-- end hello div -->
</body>
</html>

With that said, if you know how to do all those effects in a modeless div then you know how to do them in a modal div. Just place the content inside the inner modal div (modalContent)

<html>
<head>
	<script type="text/javascript" src="modal.js"></script>
    <script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
    <script type="text/javascript" src="ddaccordion.js"></script>
    <script type="text/javascript">
        ddaccordion.init({
            headerclass: "expandable", //Shared CSS class name of headers group that are expandable
            contentclass: "categoryitems", //Shared CSS class name of contents group
            collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
            defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
            animatedefault: false, //Should contents open by default be animated into view?
            persiststate: true, //persist state of opened contents within browser session?
            toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
            togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
            animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
            oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                //do nothing
            },
            onopenclose:function(header, index, state, isclicked){ //custom code to run whenever a header is opened or closed
                //do nothing
            }
        })

</script>
<style type="text/css">

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

</style>
	<link rel="stylesheet" href="modal.css" type="text/css" /> 
	<script language="javascript">
		function showModal()
		{
			var x = 'something to check';
			$('txt').innerHTML = x;
			sm('box',300,300);
		}
		
		function okSelected() 
		{
			var y = x;
			alert(y);
		}		
	</script>
</head>
<body>
	<div id="box" class="dialog">
		<div style="text-align:center">
			<span id="txt">Press OK to continue.</span><br>
			<button onclick="hm('box');okSelected()">OK</button>
		</div> 
        <div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>
	</div> 
	<input type="text" size=250/><br/>
	<input type="button" onClick="showModal()" value="CLICK ME"></input>
</body>
</html>

In this code i am getting the modal window .. but when i put this accordion menu script its not working the modal window page.....I want a modal window in which i can put tab contents or sliding menus like accordion menu
Please help me

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.