"Modal list"
Bootstrap 3.1.0 Snippet by karol-wojcik

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Popup List Group with Hidden Sub-menu</h2> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#companyPositionModal"> Open popup </button> </div> <!-- Modal --> <div class="modal fade" id="companyPositionModal" tabindex="-1" role="dialog" aria-labelledby="companyPositionLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="companyPositionLabel">Company positions</h4> </div> <div class="modal-body"> <div class="hidden" id="companyPosEditTemplate"> <form role="form"> <div class=""> <input type="hidden" name="position_id" class="hidden" value=""> <div class="input-group input-group-option col-xs-12"> <input type="text" name="position_label" class="form-control companyPosInput" value=""> <span class="input-group-btn companyPosButtonsEdit"> <button class="btn btn-primary companyPosEditSaveBtn" data-loading-text="Saving..." type="button"><span class="glyphicon glyphicon-ok"></span></button> <button class="btn btn-default companyPosEditCancelBtn" type="button" data-toggle="tooltip" data-placement="top" title="Cancel" > <span class="glyphicon glyphicon-remove"></span> </button> </span> </div> </div> </form> </div> <div class="row"> <div class="col-sm-offset-2 col-sm-8"> <ul class="list-group companyPosItemsList"> <li class="list-group-item" data-position-id="123"> <div class="companyPosItem"> <span class="companyPosLabel">Vet Appointment!</span> <ul class="list-group-submenu"> <li class="list-group-submenu-item"> <button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove"> <span class="glyphicon glyphicon-remove"></span> </button> </li> </ul> </div> </li> <li class="list-group-item" data-position-id="345"> <div class="companyPosItem"> <span class="companyPosLabel">Complete Project</span> <ul class="list-group-submenu"> <li class="list-group-submenu-item"> <button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove"> <span class="glyphicon glyphicon-remove"></span> </button> </li> </ul> </div> </li> <li class="list-group-item" data-position-id="87"> <div class="companyPosItem"> <span class="companyPosLabel">Celebrate</span> <ul class="list-group-submenu"> <li class="list-group-submenu-item"> <button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove"> <span class="glyphicon glyphicon-remove"></span> </button> </li> </ul> </div> </li> </ul> <div class="form-group form-group-options"> <div class="input-group input-group-option col-xs-12"> <input type="text" name="position_label" class="form-control companyPosInputNew" placeholder="New"> <span class="input-group-btn companyPosButtonsNew hidden"> <button class="btn btn-primary companyPosSaveBtn" data-loading-text="Saving..." type="button"><span class="glyphicon glyphicon-ok"></span></button> <button class="btn btn-default companyPosCancelBtn" type="button"><span class="glyphicon glyphicon-remove"></span></button> </span> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button> </div> </div> </div> </div> </div>
.list-group { overflow: hidden; } .list-group-item:first-child, .list-group-item:last-child { overflow: hidden; } .list-group-submenu { position: absolute; top: 3px; right: 3px; white-space: nowrap; list-style: none; padding-left: 0px; } .list-group-submenu .list-group-submenu-item { float: right; white-space: nowrap; display: block; padding: 0; margin-bottom: -1px; } .no-border { border: none; } /* Text fields */ div.input-group-option:last-child span.input-group-addon-remove{ /*display: none;*/ } div.input-group-option:last-child input.form-control{ border-bottom-right-radius: 3px; border-top-right-radius: 3px; } div.input-group-option{ margin-bottom: 3px; }
$(function () { var formTemplate = $('#companyPosEditTemplate'); $(document).on('click', '#companyPositionModal', function(e) { cleanAddNewCompanyPosForm(e, $(this)); }); function closeAllOpenedForms() { $('ul.companyPosItemsList').find('form').each(function() { $(this).closest('li.list-group-item').find('.companyPosItem').removeClass('hidden'); $(this).remove(); }); } function stopCompanyPositionEdition(event, element) { var listItem = $(element).closest('li.list-group-item'); listItem.find('form').remove(); listItem.find('.companyPosItem').removeClass('hidden'); } function cleanAddNewCompanyPosForm(event, element) { $(element).find('.companyPosButtonsNew').addClass('hidden'); $(element).find('.companyPosInputNew').val(''); } $(document).on('click', '.companyPosLabel', function(event) { closeAllOpenedForms(); var listItem = $(this).closest('li.list-group-item'); var companyPosItem = listItem.find('.companyPosItem'); var label = $(this).html(); var id = listItem.data('positionId'); var form = formTemplate.find('form').clone(); form.find('input[name=position_id]').val(id); form.find('input[name=position_label]').val(label); companyPosItem.addClass('hidden'); listItem.append(form).find('input[name=position_label]').focus(); }); function saveEditedCompanyPos(event, element) { var listItem = $(element).parents('li.list-group-item'); var btn = $(listItem).find('.companyPosEditSaveBtn'); var cancelBtn = $(listItem).find('.companyPosEditCancelBtn'); var inputField = $(listItem).find('.companyPosInput'); var value = inputField.val(); if (value) { cancelBtn.addClass('hidden'); btn.button('loading'); // todo: replace with AJAX setTimeout(function(){ listItem.html( '<div class="companyPosItem">' + '<span class="companyPosLabel">' + value + '</span>' + '<ul class="list-group-submenu">' + '<li class="list-group-submenu-item">' + '<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">' + '<span class="glyphicon glyphicon-remove"></span>' + '</button>' + '</li>' + '</ul>' + '</div>' ); }, 1500); } } $(document).on('click', '.companyPosEditSaveBtn', function (e) { console.log('clicked'); e.stopPropagation(); saveEditedCompanyPos(e, $(this)); }); $(document).on('keypress', '.companyPosInput', function (e) { if (e.which === 13) { e.stopPropagation(); e.preventDefault(); saveEditedCompanyPos(e, $(this)); } }); $(document).on('click', '.companyPosEditCancelBtn', function(e) { stopCompanyPositionEdition(e, $(this)); }); $(document).on('click', '.companyPosEditCancelBtn', stopCompanyPositionEdition); $(document).on('focus', '.companyPosInputNew', function() { var buttonsBar = $(this).parents('div').find('.companyPosButtonsNew'); buttonsBar.removeClass('hidden'); }); $(document).on('click', '.companyPosCancelBtn', function (e) { cleanAddNewCompanyPosForm(e, $(this)); }); function saveNewCompanyPos(event, btn, inputField) { var cancelBtn = $('.companyPosCancelBtn'); var listContainer = $('ul.companyPosItemsList'); var value = inputField.val(); if (value) { cancelBtn.addClass('hidden'); btn.button('loading'); // $.ajax(...).always(function () { // }); // todo: replace with AJAX setTimeout(function(){ listContainer.append( '<li class="list-group-item" data-position-id="231">' + '<div class="companyPosItem">' + '<span class="companyPosLabel">' + value + '</span>' + '<ul class="list-group-submenu">' + '<li class="list-group-submenu-item">' + '<button type="button" class="btn btn-default no-border" data-toggle="tooltip" data-placement="top" title="Remove">' + '<span class="glyphicon glyphicon-remove"></span>' + '</button>' + '</li>' + '</ul>' + '</div>' + '</li>' ); inputField.val(''); btn.button('reset'); cancelBtn.removeClass('hidden'); }, 1500); } } $(document).on('click', '.companyPosSaveBtn', function (e) { e.stopPropagation(); var btn = $(this); var inputField = btn.parents('div').find('.companyPosInputNew'); saveNewCompanyPos(e, btn, inputField); }); $(document).on('keypress', '.companyPosInputNew', function (e) { if (e.which === 13) { e.stopPropagation(); var inputField = $(this); var btn = inputField.parents('div').find('.companyPosSaveBtn'); saveNewCompanyPos(e, btn, inputField); } }); });

Related: See More


Questions / Comments: