Bootstrap Snippet Modal list using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal list"
Bootstrap 3.1.0 Snippet by karol-wojcik

Related: See More

Questions / Comments:

"Modal list" Bootstrap 3.1.0 Snippet by karol-wojcik

Related: See More

Questions / Comments:

"Modal list"
Bootstrap 3.1.0 Snippet by karol-wojcik