Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Modal Window

  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    52
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Macintosh Modal Window

    Ok guys, thanks for getting me started towards my goal which was...

    "Make a In screen Pop-up video like http://www.accuweather.com/us/oh/cle...-forecast.asp# (when you click the video forecast)"

    Now I have got to the point where I have a model window.

    But I have no clue how to embed stuff in different spots...
    Such as putting the video in the left corner, Having a title at the top a ad to the right and a picture at the bottom.

    The HTML Page Code is currently this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <title>Weather For Northeast Ohio and home for the upcoming 2010-2011 winter forecast - HOME</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <meta name="keywords" content="weatheralert.webs.com, neoweather.com, weather forecast for cleveland, weather forecast for akron, weather forecast for canton, weather information for northeast ohio, weather forecast for northeast ohio, weather for northeast ohio, weather maps for akron, weather maps for cleveland, weather maps for canton, weather forecast, Northeast Ohio Weather, Northeast Ohio Weather Forecast">
    <meta name="description" content="Providing Weather Forecasts for Northeast Ohio, with all-new fast updating animated radars and new improved">
    <script type="text/javascript" src="http://neoweather.mobify.me/mobify/redirect.js">
    </script>
    <script type="text/javascript">
    try{_mobify("http://neoweather.mobify.me/");} catch(err) {};
    </script>
    <meta name="google-site-verification" content="jIsuwFja6snlO_BcZ_EQ_JI-_1T-YyJJctMINIt0X9g"><!-- master default -->
    <script type="text/javascript" lang="javascript" src="http://deseloper.org//examples/modal-simple/jquery-1.2.3.js"></script>
    	<script type="text/javascript" lang="javascript" src="http://deseloper.org//examples/modal-simple/modal-window.js"></script>	
    	<script type="text/javascript" lang="javascript">
    	var openMyModal = function(source)
    	{
    		modalWindow.windowId = "myModal";
    		modalWindow.width = 480;
    		modalWindow.height = 310;
    		modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'>&lt/iframe>";
    		modalWindow.open();
    	};	
    	</script>
    	<style type="text/css">
    	html, body, #fw-nav-menu ul, #fw-footer p, #fw-blockContainer p {
    	margin:0;
    	padding:0
    }
    
    html {
    	background:#fff;
        font:.9em Arial, Helvetica, sans-serif;
    	color:#5c5c5c
    }
    
    #fw-leftColumn, #fw-mainColumn, #fw-rightColumn {
    	overflow-x: hidden;
    }
    
    .hasOneColumn #fw-leftColumn, .hasOneColumn #fw-rightColumn {
    	display:none
    }
    
    .hasOneColumn #fw-mainColumn {
    	float:none;
            overflow-x: hidden;
    }
    
    .hasTwoColumns #fw-rightColumn {
    	display:none
    }
    
    .hasSidebar #fw-bigcontain {
    	float:left;
    	width:508px;
        margin-top: 10px;
        overflow-x: hidden;
    }
    
    .hasSidebar #fw-sidebar {
    	float:right;
    	margin-right: 35px;
    	width:180px;
    	border-left:1px dashed #ccc;
        margin-top: 10px;
    }
    
    #fw-sidebar .fw-title {
        font-size:.01em;
        margin-left:-10px;
        margin-bottom:10px;
    }
    
    #fw-sidebar .fw-text{
    	font-size:.9em;
    }
    
    #fw-sidebar .fw-paragraph {
        margin-bottom: 20px;
    }
    
    .noSidebar #fw-sidebar {
    	display:none
    }
    
    a {
    	color:#333
    }
    
    a:hover, a:visited {
    	color:#666
    }
    
    #fw-advertisement {
    	margin:1em 0;
    	text-align:center
    }
    
    #fw-container {
    	margin:0 auto 1em;
    	width:770px;
    	border:1px solid #C0C0C0;
            background: #fff;
    }
    
    #fw-head {
    	padding:70px 0 60px 35px;
    	height:55px;
    	position:relative;
    	/*background:url('banner.png') no-repeat;*/
    }
    .fw-logo {
    	position:absolute;
    	top:35px;
    	left:590px;
    	width:164px;
    	height:132px;
    	background-repeat:no-repeat;
    	background-position:right;
    }
    
    #fw-nav-menu .fw-nav-level-0 {
        padding:1px 16px 12px;
    	background:#fff url('http://www.neoweather.com/picture14.png') repeat-x bottom;
    	font-size:9pt;
    	text-align:center
    }
    
    #fw-nav-menu .fw-nav-level-0 ul a {
    	padding: 5px 10px; 
    	color: #fff;
    }
    
    #fw-nav-menu .fw-nav-level-1 li { display: block; }
    #fw-nav-menu .fw-nav-level-2 { margin-left: -5px; }
    
    #fw-nav-menu li {
    	display:inline;
    	margin-right:1em
    }
    
    #fw-nav-menu .clears {
    	display:none
    }
    
    *:first-child+html #fw-nav-menu .fw-nav-level-1 { top: 20px !important; }
    *:first-child+html #fw-nav-menu .fw-nav-level-2 { margin-top: 2px !important; }
    
    * html .fw-nav-level-1 { top: 15px !important; }
    * html .fw-nav-level-2 { top: 0px; margin-left: -10px !important; }
    
    .noSidebar .fw-paragraph {
    	margin:auto;
    	background:url('http://static.websimages.com/static/motifs/Wave/content-bg.png') repeat-y center;
    	overflow-x: hidden;
    	width: 740px;
    }
    
    .fw-text { overflow-x: hidden; width:700px; padding-left:20px;} 
    
    .hasSidebar .fw-text { width: auto; }
    
    #fw-sidebar .fw-text {
        width: 180px;
    }
    
    .noSidebar .fw-paragraphtop {
            width:740px;
    	margin:0;
    	height:35px;
    	background:url('http://static.websimages.com/static/motifs/Wave/paragraph-top.png') no-repeat bottom center;
    }
    
    .formSpan {
    	display: block;
    	margin-bottom:1.25em
    }
    
    .fw-title {
    	margin:0;
    	padding:0;
          padding-left: 30px;
    	  font-size:17pt;
    }
    
    #fw-sidebar .fw-title a,
    #fw-sidebar .fw-title a:visited,
    #fw-sidebar .fw-title a:hover {
    	color: #5C5C5C;
    	text-decoration: none;
    }
    
    .noSidebar .fw-paragraphbottom {
    width:740px;
    	height:35px;
    	background:url('http://static.websimages.com/static/motifs/Wave/paragraph-bottom.png') no-repeat bottom center;
    }
    
    .clears, #fw-footer {
    	clear:both
    }
    
    #fw-footer {
    	background:#f7f7f7 url('http://static.websimages.com/static/motifs/Wave/footer-top.png') repeat-x;
    	padding:15px;
    	text-align:right;
    }
    p.fw-footertext {font-size:8pt;}
    
    .fw-odd {background-color:#E8E8E8; border-color:#c0c0c0;} 
    .fw-even {background-color:#fff; border-color:#000}
    .fw-primary {color:#fff; background-color:#949494; border-color:#E7E7E7;} 
    .fw-secondary {color:#000; background-color:#c0c0c0; border-color:#808080;}
    	html,body
    	{
    		margin:0;
    		padding:0;
    	}
    	.modal-overlay
    	{
    		position:fixed;
    		top:0;
    		right:0;
    		bottom:0;
    		left:0;
    		height:100%;
    		width:100%;
    		margin:0;
    		padding:0;
    		background:#FFFF00;
    		opacity:.75;
    		filter: alpha(opacity=75);
    		-moz-opacity: 0.75;
    		z-index:101;
    	}
    	* html .modal-overlay
    	{   
    		position: absolute;
    		height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
    	}
    	.modal-window
    	{
    		position:fixed;
    		top:50%;
    		left:50%;
    		margin:0;
    		padding:0;
    		z-index:102;
    	}
    	* html .modal-window
    	{
    		position:absolute;
    	}
    	.close-window
    	{
    		position:absolute;
    		width:32px;
    		height:32px;
    		right:8px;
    		top:8px;
    		background:transparent url('http://neoweather.com/close.png') no-repeat scroll right top;
    		text-indent:-99999px;
    		overflow:hidden;
    		cursor:pointer;
    		opacity:.5;
    		filter: alpha(opacity=50);
    		-moz-opacity: 0.5;
    	}
    	.close-window:hover
    	{
    		opacity:.99;
    		filter: alpha(opacity=99);
    		-moz-opacity: 0.99;
    	}
    	</style>
    	
    <link rel="stylesheet" type="text/css" href="http://static.websimages.com/static/global/theme/css/pluggables.css">
    <script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/webs_common.js">
    </script>
    <script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/websover.min.js">
    </script>
    <link id="templatebase" rel="stylesheet" type="text/css" media="screen" href="http://static.websimages.com/static/global/css/templatebase.css">
    <link id="fw_template_file" rel="stylesheet" type="text/css" href="http://weatheralert.webs.com/main.css" media="screen"><!-- Start com.freewebz.clicky.ClickyPlugin@57349024 -->
    <!-- End com.freewebz.clicky.ClickyPlugin@57349024 -->
    <link rel="stylesheet" type="text/css" href="http://images.freewebs.com/Members/Generationz/Standard/PrintCSS/print.css" media="print">
    
    </head>
    <body class="hasOneColumn noSidebar navtype-Top">
    <!-- Start com.freewebz.clicky.ClickyPlugin@57349024 -->
    <!-- End com.freewebz.clicky.ClickyPlugin@57349024 -->
    <script type="text/javascript" src="http://static.websimages.com/JS/fw.js">
    </script><!--
    {NavHeaderFormat}
    <li class="fw-navheader">{NavHeader}</li>
    {/NavHeaderFormat}
    
    
    
    -->
    <div id="fw-container">
    <div id="fw-head">
    <h1 id="fw-title"><a id="fw-titlelink" href="http://neoweather.com"></a></h1>
    <h2 id="fw-smalltitle"></h2>
    <div id="logo-div" class="fw-logo"></div>
    </div>
    <center>
    <div id="fw-blockContainer">
    <div id="fw-mainnavwrap">
    <div id="fw-nav-menu">
    <ul class="fw-nav-level-0">
    <li><a class="section" href="http://neoweather.com">HOME</a></li>
    <li><a class="section" href="http://neoweather.com/radar.htm">RADAR</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/neoradar.html">NORTHEAST OHIO</a></li>
    <li><a class="section" href="http://neoweather.com/ohioradar.html">REGIONAL</a></li>
    <li><a class="section" href="http://neoweather.com/radar.htm">MORE RADARS</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/myforecast.html">FORECAST</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/myforecast.html">NORTHEAST OHIO</a></li>
    <li><a class="section fw-current-nav-link" href="http://neoweather.com/clevelandoh44101.htm">CLEVELAND,OH (44101)</a></li>
    <li><a class="section" href="http://neoweather.com/akronoh44301.htm">AKRON, OH (44301)</a></li>
    <li><a class="section" href="http://neoweather.com/cantonoh44701.htm">CANTON, OH (44701)</a></li>
    <li><a class="section" href="http://neoweather.com/dailyvideo.html">OTHER</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/dailyvideo.html">VIDEO FORECAST</a></li>
    <li><a class="section" href="http://neoweather.com/livevideo.htm">LIVE VIDEO</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/severeweather.htm">SEVERE WEATHER</a></li>
    <li><a class="section" href="http://neoweather.com/livevideo.htm">DAILY LIVE VIDEO</a></li>
    <li><a class="section" href="http://neoweather.com/livevideo.htm">WINTER STORMS</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/news.htm">NEWS</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/news.htm">SPORTS AND LOCAL NEWS</a></li>
    <li><a class="section" href="http://youtube.com/theweatheralert">VIDEO</a></li>
    <li><a class="section" href="http://neoweather.com/pictures.htm">PICTURES</a></li>
    <li><a class="section" href="http://neoweather.com/apps/guestbook/">GUESTBOOK</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/seasonaloutlooks.htm">OUTLOOK</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/20102011winterupdate.htm">2010-2011 WINTER UPDATE</a></li>
    <li><a class="section" href="http://neoweather.com/apps/forums/">2010-2011 WINTER</a></li>
    <li><a class="section" href="http://neoweather.com/2011winterforecast.htm">2011 WINTER FORECAST</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/snowday.htm">SNOW DAY?</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/snowday.htm#533094399">SCHOOL CLOSINGS</a></li>
    <li><a class="section" href="http://neoweather.com/snowday.htm#533092221">SNOW DAY MAP</a></li>
    <li><a class="section" href="http://neoweather.com/snowday.htm#549037825">CHAT</a></li>
    <li><a class="section" href="http://neoweather.com/snowday.htm#549037825">WRITTEN FORECAST</a></li>
    </ul>
    </li>
    <li><a class="section" href="http://neoweather.com/info.htm">INFO</a>
    <ul class="fw-nav-level-1">
    <li><a class="section" href="http://neoweather.com/info.htm">CONTACT ME</a></li>
    <li><a class="section" href="http://neoweather.com/join.html">JOIN THE FORECASTING TEAM!!</a></li>
    <li><a class="section" href="http://neoweather.com/advertising.html">ADVERTISE HERE</a></li>
    <li><a class="section" href="http://neoweather.com/info.htm">SEARCH THE SITE</a></li> 
    </ul>
    </li>
    </ul>
    </div>
    </div>
    <div id="fw-bigcontain">
    <div id="fw-columnContainer">
    <div id="fw-mainColumn"><!-- ParagraphStart 534876716 -->
    <div class="fw-paragraph">
    <div class="fw-paragraphtop"></div>
                         
      <!-- ParagraphTitleEnd -->
    
    <div class="fw-text"><!-- ParagraphBodyStart -->
      <p class="c4">    <script type="text/javascript" src="http://widgets.amung.us/tab.js">
    </script><script type="text/javascript">
    WAU_tab('g6phqlykivn0', 'bottom-center')
    </script></p>
      <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en">
    </script>
      <p class="c4"><script type="text/javascript">
    <!--
    google_ad_client = "pub-1327335956522478";
    /* 180x150, created 5/14/10 */
    google_ad_slot = "4377672854";
    google_ad_width = 180;
    google_ad_height = 150;
    //-->
    </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script> <a href="http://www.neoweather.com/today.html"><img src="http://www.neoweather.com/todaytoday.jpg" width="300" height="150" border="0" alt="36 Hour Forecast"> 
     <script type="text/javascript"><!--
    google_ad_client = "pub-1327335956522478";
    /* 180x150, created 8/14/10 */
    google_ad_slot = "3838066954";
    google_ad_width = 180;
    google_ad_height = 150;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </a></p>
      <p class="c4"> </p>
      <a class="fw_link_page" href="http://weatheralert.webs.com/radar.htm"><IMG SRC="http://neoweather.com/ViewSevere.jpg" WIDTH="706" HEIGHT="50" class="fw_image_computer fwSizeProp c5" alt="Severe Weather"></a>
      <p class="c4"> </p>
      <p class="c7">
      <a href="http://neoweather.com/livevideo.htm"><IMG SRC="http://neoweather.com/liveandstorm.jpg" ALT="Go to Live Video Page" WIDTH="300" HEIGHT="480" ALIGN="RIGHT">
      <p class="c8">
      <a href="http://neoweather.com/official.swf" target="_blank" onclick="openMyModal('http://neoweather.com/official.swf'); return false;"><IMG SRC="http://neoweather.com/videoforecast.jpg" WIDTH="400" HEIGHT="480" alt="Severe Weather">
     
        
       </a></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <p class="c8"></p>
      <div class="c9"></div>
      <p class="c8"><span class="Apple-style-span Apple-style-span Apple-style-span c10"> </span></p>
      <span class="Apple-style-span c13"><a class="fw_link_page" href="http://weatheralert.webs.com/radar.htm"><img border="0" src="http://neoweather.com/ViewMaps.jpg" width="706" height="50"  alt="** PLEASE DESCRIBE THIS IMAGE **"></a><span class="c12"> </span></span>
      
      </p>
    <a class="fw_link_page" href="http://weatheralert.webs.com/7dayforecast.html"><IMG SRC="http://neoweather.com/TEST.jpg" ALT="7 Day Forecast" WIDTH=710 HEIGHT=390></a></span>
      <!-- ParagraphBodyEnd --></div>
      
    
    
    <div class="fw-paragraphbottom"></div>
    </div>
    <!-- ParagraphEnd 534876716 --></div>
    </div>
    </div>
    <div id="fw-sidebar">
    <div id="fw-sidebarbegin"></div>
    <div id="fw-sidebarend"></div>
    </div>
    <div class="clears"></div>
    </div>
    <div id="fw-footer">
    <p id="fw-foottext" class="fw-footertext"><span class="Apple-style-span c13">Copyright to Weather Alert ©2009-2010</span></p>
    </div>
    </div>
    <!-- Start com.freewebz.clicky.ClickyPlugin@57349024 -->
    <script type="text/javascript" src="http://images.freewebs.com/JS/clicky.js">
    </script><script type="text/javascript">
    var clicky_page_title='HOME';startClicky(49522255,'fwdb4');
    </script><noscript>
    <p><span class="Apple-style-span c13"><img alt="Clicky Web Analytics" src="http://in.freewebs.getclicky.com/49522255-fwdb4.gif"></span></p>
    </noscript><!-- End com.freewebz.clicky.ClickyPlugin@57349024 -->
    <!--[if IE 6]>
    
    <script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/ie6subnav.js"></script>
    <![endif]-->
    <!-- [SB] PageID 164648476-->
    <!-- appserver9 -->
    </body>
    </html>
    I know some of the code is messy but we can still do this with what i have, as far as I am concerned.

    Thanks and please give all you can.

  • #2
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    I don't know what you're trying to accomplish here. I see you're attempting to use a knock off version of RokBox for displaying your videos. I think this site is good, but how are you going to incorporate everything into your site? Like you need some RSS feeds for your weather, you need the video of the day off of your local weather channel site, etc etc.

    Is this a school project by any chance?

    J-

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    52
    Thanks
    3
    Thanked 0 Times in 0 Posts
    We already have RSS for Video. No this is a hobby.

    The RSS's are already ok I just dont know how to incorporate all of them with the modal window.

    Thanks

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    52
    Thanks
    3
    Thanked 0 Times in 0 Posts
    The RSS Feed for the video is at feed://blogs.members.webs.com/Members/Blogs/viewBlogRSS.jsp?userid=49522255

    PLEASE HELP


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •