Отображение редактора строк строки в bootstrap popover

Question

У меня есть ссылка на редактирование и удаление в столбце в сетке. Когда я нажимаю на кнопку редактирования, я хочу, чтобы загрузочный popover с деталями строки в нем.

Я был успешным в той мере, в какой я могу отображать popover, но похоже, что он прячется за столом. Я попытался установить z-index, но безрезультатно. Код ниже:

var popoverReference = $(".growthGridActions_edit").popover({ 
     'title': 'Edit Record', 
     'html' : true, 
     'placement' : 'left', 
     'template': popOverTemplate 
    }); 
    popoverReference.click(function(e) { 
     var me = $(this), rowid = me.attr('rowId'); 

     var editGrowthRecordView = new WTG.view.GrowthEditView({ 
      template:$("#GROWTH-RECORD-EDIT").html(), 
      model: new WTG.Model(growthGridRef.getDataItem(rowid)) 
     }); 

     editGrowthRecordView.render(); 

     $("#"+me.attr('id')).attr('data-content', editGrowthRecordView.$el.html()); 
     var popover = $("#"+me.attr('id')).data('popover'); 
     popover.setContent(); 
     popover.$tip.addClass(popover.options.placement); 
    }) 

Пожалуйста, помогите

Answer 1

я делаю что-то подобное. У меня есть мода загрузки, когда я дважды щелкаю строку в моей сетке. Модальный отображает детали строки (плюс некоторые дополнительные сведения), которые я извлекаю с помощью AJAX. Это работает отлично, никаких проблем с z-index.

Возможно, наши подходы немного отличаются друг от друга, но я надеюсь, что код ниже помогает.

бутстрапом Модальные

<div id="user-details-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 650px"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">User View</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal" action="/user/update" method="POST"> 
      <input type="hidden" id="userId" name="userId"/> 
      <div class="control-group"> 
       <label class="control-label" for="firstName">First Name</label> 
       <div class="controls"> 
        <div class="input-prepend"> 
         <span class="add-on"><i class="icon-user"></i></span> 
         <input class="input-xlarge" type="text" required id="firstName" name="firstName" placeholder="First Name"> 
        </div> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="lastName">Last Name</label> 
       <div class="controls"> 
        <div class="input-prepend"> 
         <span class="add-on"><i class="icon-user"></i></span> 
         <input class="input-xlarge" type="text" required id="lastName" name="lastName" placeholder="Last Name"> 
        </div> 

       </div> 
      </div> 

... more fields 

    <div class="modal-footer"> 
     <button type="submit" class="btn btn-info">Save Changes</button> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

Slick Сетка Настройка

setupGrid:(onDblClick)-> 
    grid = new Slick.Grid(@gridId, dataView, @columns, options) 
    grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true })) 
    grid.onDblClick.subscribe((e, args)-> 
     onDblClick(dataView.getItem(args.row).id); 
    ) 
    $(window).resize(-> 
     grid.resizeCanvas() 
    ) 

Отображение Modal

onDblClick = (id) => 
    $userDetails = $('#user-details-modal') 
    $.get('/user/' + id + '/details') 
    .success((results)-> 
     $userDetails.find('#userId').val(results.id) 
     $userDetails.find('#firstName').val(results.FirstName) 
     $userDetails.find('#lastName').val(results.LastName) 
     $userDetails.find('#userName').val(results.UserName) 
     $userDetails.find('#email').val(results.Email) 
     $userDetails.find('#password').val(results.Password) 
     $userDetails.modal() 
    ) 

Answer 2

У меня была такая же проблема, как и у. Не уверен, почему это было отмечено ответом, поскольку исходный вопрос касался загрузки bootstrap, и ответ о модальном. Я предполагаю, что оп изменился на модальный.

Любом просто отправляю это если кто-то имеет такую ​​же проблему при попытке использовать загрузочный поповер в slickgrid Чтобы решить, что просто установить контейнер для тела ... дата-контейнер = «тело»