单击 table 行时创建模式

Question

我如何创建一个模式，用户可以在其中编辑 table 中选定行的内容？有人可以教我怎么做吗？我在 Web 开发方面有点新，我只需要按照要求执行此操作。谢谢！

这是我的代码 (HTML)：

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

这是一个简单的模式，没有任何过渡、动画或内容。基本上，您构建一个容器，将其放置在屏幕中央，然后在单击时隐藏和显示它（使其动画化，使其动画化）。

这是一个有效的插件：http://plnkr.co/edit/0hHcW4Es46VrHEZkme8m

<style>
    .modal{
        background-color: #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 400px;
        width: 600px;
        z-index: 1000;
        display: none;
    }

    .overlay{
        background-color: rgba(0,0,0,0.6);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        display: none;
    }
</style>

<div class="overlay" id="overlay"></div>
<div class="modal" id="modal"></div>

(function(document){
    var modal = document.getElementById('modal');
    var overlay = document.getElementById('overlay');
    var clickElement = //select whatever you want to trigger the click

    var openModal = function(){
        modal.style.display = 'block';
        overlay.style.display = 'block';
    };

    var closeModal = function(){
        modal.style.display = 'none';
        overlay.style.display = 'none';
    };

    clickElement.addEventListener('click', openModal);
    overlay.addEventListener('click', closeModal);
})(document);

Answer 2

好的。这是简单的 DEMO 和基于 bootstrap 的模式，下面是代码：

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">EDIT</h4>
      </div>
      <div class="modal-body">
        <p><input type="text" class="input-sm" id="txtfname"/></p>
        <p><input type="text" class="input-sm" id="txtlname"/></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

单击 table 行时创建模式

Create modal when table row was clicked

jquery

bootstrap-modal