Simple Lightbox

Uses jQuery, CSS and HTML. Centers lightbox based on width of viewport.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<button id="search-submit">select An Option</button>
<div id="lightbox"></div>
<div id="lb-content"> <span id="lb-close">x</span>
    <input id="color" value="1" />
</div>

CSS

body {
    color: #fff;
    font-family: arial;
    font-family: arial;
}
#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    text-align: center;
    display: none;
}
#lb-content {
    color: #222;
    height: 150px;
    width: 260px;
    border: 16px solid #222;
    background-color: #fff;
    position: relative;
    text-align: center;
    padding-top: 10px;
    border-radius: 4px;
    display: none;
}
#lb-close {
    display: block;
    height: 22px;
    width: 25px;
    background-color: red;
    color: #fff;
    position: absolute;
    top: -25px;
    right: -25px;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
}

JavaScript

var lightBox = $('#lightbox'),
    lightBoxContent = $('#lb-content');
var data = [{
    text: "Black",
    value: "1"
}, {
    text: "Orange",
    value: "2"
}, {
    text: "Grey",
    value: "3"
}];

$("#color").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0
});

var positionLightbox = function () {
    var veiwWidth = $(window).width(),
        lbContentMargin = (veiwWidth / 2) - 148,
        lbContent = $('#lb-content');

    lbContent.css({
        'left': lbContentMargin,
            'top': $(window).scrollTop() + 50 + 'px'
    });
};

$('#search-submit').click(function () {
    lightBox.fadeIn(function () {
        lightBoxContent.show();
        var d = $("#color").data("kendoDropDownList");
        d.open();
    });
    positionLightbox();
});

$('#lb-close').click(function () {
    lightBox.hide();
    lightBoxContent.hide();
});


// create DropDownList from input HTML element