jQuery UI Popup Menu

by reubenhelms

HTML

<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div class="tab-panel">
    <div id="dialog">
        <ul id="menu">
            <li data-link="viewsharedprofile.aspx?lang=en-us"><a href="#">Profile (PDF)</a>

            </li>
            <li data-link="viewsharedprofile.aspx?type=epub&lang=en-us"><a href="#">Profile (EPUB)</a>

            </li>
            <li data-link="viewsharedindividualsummary.aspx?lang=en-us"><a href="#">Individual Summary (PDF)</a>

            </li>
        </ul>
    </div>
    <div class="cell-wrapper" data-sharecode="1">
        <div class="cell">
            <img class="profile-img" src="">
            <br/> <span class="profile-name">Reuben<br/>
        Helms</span>

        </div>
    </div>
    <div class="cell-wrapper" data-sharecode="2">
        <div class="cell">
            <img class="profile-img" src="">
            <br/> <span class="profile-name">Other<br/>
            Guy</span>

        </div>
    </div>
    <div class="cell-wrapper" data-sharecode="3">
        <div class="cell">
            <img class="profile-img" src="">
            <br/> <span class="profile-name">IndywidualneIndywidualneIndywidualn2 <br/>
            PodsumowaniePodsumowaniePodsumowani</span>

        </div>
    </div>
    <div class="cell-wrapper" data-sharecode="4">
        <div class="cell">
            <img class="profile-img" src="">
            <br/> <span class="profile-name">Number<br/>
            Three</span>

        </div>
    </div>
    <div class="cell-wrapper" data-sharecode="5">
        <div class="cell">
            <img class="profile-img" src="">
            <br/> <span class="profile-name">IndywidualneIndywidualneIndywidualn <br/>
            PodsumowaniePodsumowaniePodsumowani</span>

        </div>
    </div>
</div>

CSS

.profile-img {
    width: 114px;
    height: 114px;
}
.cell {
    text-align: center;
}
.cell-wrapper {
    display: inline-block;
    margin: 0 10px 10px 10px;
    min-width: 180px;
    min-width: 22ch;
    vertical-align: top;
}
.menuDialog {
    border-width: 0px;
    padding: 0;
}
.menuDialog > .ui-dialog-titlebar {
    display: none;
}
.menuDialog > .ui-dialog-content {
    padding: 0;
}
.profile-img, .profile-name {
    cursor: pointer;
}

JavaScript

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    closeOnEscape: true,
    title: false,
    dialogClass: "menuDialog",
    width: "auto",
    height: 101,
    resizable: false,
    draggable: false,
    open: function (event, ui) {
        $(".ui-widget-overlay").on("click", function () {
            $("#dialog").dialog("close");
        });
    }
});
$("#menu").menu({
    select: function (event, ui) {
        console.log(ui.item);
        var link = ui.item.data("link");
        var sharecode = ui.item.parent().data("sharecode");
        $("#dialog").dialog("close");
        alert("Launching " + link + " with sharecode " + sharecode);
    }
});
$(".profile-img, .profile-name").on("click", function (event) {
    // set the sharecode on the menu
    $("#menu").data("sharecode", $(event.currentTarget).parents(".cell-wrapper").first().data("sharecode"));
    // open the dialog
    $("#dialog").dialog("open");
});