带引号的Bootstrap Modal照片库

Question

我想制作Bootstrap Modal Photo Gallery，用户可以在模式窗口中留下照片评论。是否存在任何类似的片段或插件？像这个：

Answer 1

演示：根据您的要求，在代码片段上运行完整的页面模式

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<style>
        .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
            margin-right: -382px;
        }
        .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
            margin-left: -71px;
        }

    </style>


  <div class="container">
       
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Gallery Model</button>


        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="myCarousel" class="carousel slide" data-ride="carousel" style="height:600px">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                    <li data-target="#myCarousel" data-slide-to="1"></li>
                                    <li data-target="#myCarousel" data-slide-to="2"></li>
                                    <li data-target="#myCarousel" data-slide-to="3"></li>
                                </ol>

                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img alt="1" width="460" height="600">
                                    </div>

                                    <div class="item">
                                        <img alt="2" width="460" height="600">
                                    </div>

                                    <div class="item">
                                        <img alt="3" width="460" height="600">
                                    </div>

                                    <div class="item">
                                        <img alt="4" width="460" height="600">
                                    </div>
                                </div>

                                <!-- Left and right controls -->
                                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="modal-body inline">
                                <div class="row">
                                    <div class="col-md-3">
                                        <img src="http://www.solidbackgrounds.com/images/2880x1800/2880x1800-tiffany-blue-solid-color-background.jpg" width="50" height="50" alt="..." class="img-circle">
                                    </div>
                                    <div class="col-md-9">
                                        <small>Text Text Text Text</small>
                                        <small>Text Text Text Text</small>
                                        <small>Text Text Text Text</small>
                                        <br/>
                                        <span class="glyphicon glyphicon-heart"></span> Icon
                                    </div>
                                </div>
                               <hr/>
                               
                                <p class="text-success">Text Text Text</p>
                                <p>TextTextText</p>
                                <p class="text-mute">TextTextText</p>
                                <br/>                               
                                <p class="text-success">Text Text Text</p>
                                <p>TextTextText</p>
                                <p class="text-mute">TextTextText</p>
                                <br/>

                                <input placeholder="Comment" type="text" style="height:100px" class="form-control" />
                                <span class="text-mute">Please wrtie your openion.</span>
                                <button class="btn btn-sm btn-primary pull-right">Save</button>

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



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

      
    </div>