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
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
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.