Popup

by Joel Ferreira

HTML

<div class="SubItemEdit">
                <div class="SubItemLabel">Item Type</div>
                <div id="ItemType" data-LastItemTypeID="" class="SubItemFieldBorder" data-rel="popup">
                    <img id="imgItemType" alt="" src=""/>
                </div>
                <div class="ClearFloat"></div>
                <div id="ListItemType" class="SubItemEditType">
                    <div id="1" class="SubItemFieldBorderSmall SubItemFieldBorderSmallSelected">
                        <img alt="Flight" src="images/airplane.png">&nbsp;Flight
                    </div>
                    <div id="4" class="SubItemFieldBorderSmall">
                        <img alt="Train" src="images/train.png">&nbsp;Train
                    </div>
                    <div id="5" class="SubItemFieldBorderSmall">
                        <img alt="Ship" src="images/ship.png">&nbsp;Ship
                    </div>
                    <div id="6" class="SubItemFieldBorderSmall">
                        <img alt="Bus" src="images/bus.png">&nbsp;Bus
                    </div>
                    <div id="4" class="SubItemFieldBorderSmall">
                        <img alt="taxi" src="images/taxi.png">&nbsp;Taxi
                    </div>
                    <div id="14" class="SubItemFieldBorderSmall">
                        <img alt="Metro" src="images/metro.png">&nbsp;Metro
                    </div>
                    <div id="15" class="SubItemFieldBorderSmall">
                        <img alt="Car" src="images/car.png">&nbsp;Car
                    </div>
                    
                    <div id="2" class="SubItemFieldBorderSmall">
                        <img alt="Hotel" src="images/hotel.png">&nbsp;Hotel
                    </div>
                    <div id="12" class="SubItemFieldBorderSmall">
                        <img alt="Restaurant" src="images/restaurant.png">&nbsp;Restaurant
                    </div>
                    <div...

CSS

/*
Take a City My City Mobile CSS
*/

/* Base Styles */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

html {
}

body {
	margin: 0px auto;
	overflow:hidden;
	background: #FFFFFF;
	font: 14px Arial, Helvetica, sans-serif;
}

/* Generic Styles */

input {
	border: 0px;
	padding: 5px;
	background: #EEEEEE;
	font-size: 18px;
	min-width: 200px;
}

/* Specific Styles */

#Splash
{
    position:absolute;
    width:100%;
    height:100%;
    background: black;
    text-align: center;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.CenteredImg
{
	display: inline-block;
	vertical-align: middle;
}

#Main
{
	width: 100%;
}

#Nav
{
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 70px;
	background: #000000;
}

.NavTab
{
	display:table-cell;
	background: #C9E6F6;
	border: 5px solid black;
	border-bottom: 0px;
	border-radius: 15px 15px 0px 0px;
	margin: 0px;
	padding: 5px 5px 0px 5px;
	cursor: pointer;
}

#TakeaCity {

    width: 200px;
}

.NavTab:hover
{
	background: #FFFFFF;
}

.NavTabSelected
{
	background: #FFFFFF;
}

.NavSpacer
{
	clear:both;
	position:relative;
	height: 5px;
	background: #FFFFFF;
}

.TableRow {
	overflow: hidden;
	margin: 0px;
	border: 0px;
	padding: 0px;
}

.Hide {
	display:none;
}

.TableCell {
	float: left;
	margin: 0px;
	border: 0px;
	padding: 5px;
	font-size: 18px;
	min-width: 40%;
	max-width: 45%;
	text-align: center;
}

.TableLine {
	float:left;
	margin: 0px;
	border:...

JavaScript

$(document).ready(function () {
    
    $( "#ListItemType" ).popup( { positionTo: "origin", transition: "pop", corners: false });
    
    $("#ListItemType div").click(function () {
            var itemTypeID = $(this).closest("div").attr("id");
            alert("itemTypeID: " + itemTypeID);
            var img = document.getElementById(itemTypeID).innerHTML;
    
            var itemType = document.getElementById("ItemType");
    
            itemType.innerHTML = img;
            $("#ItemType").attr("data-LastItemTypeID", itemTypeID);
    
            $( "#ListItemType" ).popup( "close" );
        });
});

$("#ItemType").click(function () {
    $( "#ListItemType" ).popup( "open", { positionTo: "origin", transition: "pop", corners: false } );
});

function changeItemType(){
    alert("changeItemType");
    $( "#ListItemType" ).popup( "open", { positionTo: "origin", transition: "pop", corners: false } );
}