Popup

by Joel Ferreira

HTML

<div class="SubItemEdit">
                <div class="SubItemLabel">Item Type</div>
                <div id="ItemType" data-LastItemTypeID="" class="SubItemFieldBorder" data-rel="popup" data-position-to="origin">
                    <img id="imgItemType" alt="" src=""/>
                    div
                </div>
                <div class="ClearFloat"></div>
                <div id="ListItemType" class="SubItemEditType" data-role="popup">
                    <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 class="ClearFloat"></div>
                    <div id="2" class="SubItemFieldBorderSmall">
                        <img alt="Hotel" src="images/hotel.png">&nbsp;Hotel
                    </div>
                    <div id="12" class="SubItemFieldBorderSmall">
                        <img alt="Restaurant"...

CSS

.SubItemEdit {
    background-color: #FFFFFF;
    margin: 3px;
    border: 0px;
    padding: 5px;
    font-size: 18px;
    overflow: hidden;
}

#ListItemType-popup {
    position: absolute;
    float: left;
    width: 95%;
    z-index: 1;
    background: #FFFFFF;
    margin: 0px;
    border: solid 1px lightgrey;
    padding: 5px;
    font-size: 18px;
    overflow: hidden;
    box-shadow: 5px 5px 5px #888888;
}

.SubItemFieldBorder {
    float: left;
    background: white;
    margin: 3px;
    border: 2px solid #EEEEEE;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px;
    min-width: 200px;
    cursor: pointer;
}

.SubItemFieldBorderSmall {
    float: left;
    background: white;
    margin: 3px;
    border: 2px solid #EEEEEE;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {

    $("#ListItemType").popup( { corners: false; shadow: false; transition: "pop" } );
    
$("#ListItemType div").click(function () {

        var itemTypeDescr = $(this).closest("div").attr("id");

        var img = document.getElementById(itemTypeDescr).innerHTML;

        var itemType = document.getElementById("ItemType");

        itemType.innerHTML = img;
        $("#ItemType").attr("data-LastItemTypeID", itemTypeDescr);

        $("#ListItemType").popup( "close" );

    });
    
    $("#ItemType").click(function () {
        
        $("#ListItemType").popup( "open" );
        
    });
    
});