如何在模态中正确打开模态

Question

我正在使用bootstrap image gallery来显示我的图片，但我正在做的是图片库将显示在一个模态中，一旦你在那里点击图片以最大化它们，我的问题就是当我点击图像以最大化它时，它使用第一个模态作为视图而不是它自己的模态。

模态代码：

<a class="glyphicon glyphicon-eye-open" data-toggle="modal" data-target="#myModal" style="cursor: pointer" onclick="viewModal({{ $data->id }})">View </a>


          <div id="myModal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" style="max-width: 1300px;">
            <div class="modal-content">
             <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                      <div id="links">
                     <a href="image.jpg" title="Banana" data-gallery data-toggle="modal" data-target="#myModal2">
                    <img src="image.jpg" width="20%" alt="Banana">      
                    </div>
                     </div>
                    <div class="modal-footer">
                    </div>
                 </div>
              </div>
            </div>
        <div id="blueimp-gallery" class="blueimp-gallery">
            <!-- The container for the modal slides -->
            <div class="slides"></div>
            <!-- Controls for the borderless lightbox -->
            <h3 class="title"></h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
            <!-- The modal dialog, which will be used to wrap the lightbox content -->
            <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" aria-hidden="true">&times;</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body next"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left prev">
                                <i class="glyphicon glyphicon-chevron-left"></i>
                                Previous
                            </button>
                            <button type="button" class="btn btn-primary next">
                                Next
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>