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

Jquery 如何在模态中正确打开模态,jquery,twitter-bootstrap,modal-dialog,bootstrap-modal,Jquery,Twitter Bootstrap,Modal Dialog,Bootstrap Modal,我使用来显示我的图像,但我正在做的是,图像库将显示在一个模式中,在那里你可以单击图像以最大化它们,我的问题是,当我单击图像以最大化它时,它使用第一个模式作为它的视图,而不是它自己的模式 模态代码: <a class="glyphicon glyphicon-eye-open" data-toggle="modal" data-target="#myModal" style="cursor: pointer" onclick="viewModal({{ $data->id }})"&g

我使用来显示我的图像,但我正在做的是,图像库将显示在一个模式中,在那里你可以单击图像以最大化它们,我的问题是,当我单击图像以最大化它时,它使用第一个模式作为它的视图,而不是它自己的模式

模态代码:

<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>

›
×
&时代;
以前的
下一个

我必须再次检查我的工作内容,但我刚刚触发了另一个模式(技术上不在当前模式下),它会在当前实例的顶部弹出。这就是你要找的吗?您的问题听起来像是您的图像处于相同的模式。我的图像位于模式1中,当您单击该图像时,您会在模式2中看到更大的版本。您应该能够在第一个模式之外的模式中获得相同的结果。@makingitwork-您的代码似乎可以完全满足您的要求。它打开modal1,我可以在其中看到图像,当我单击每个图像时,它会在其顶部打开另一个modal2。(我在
中放置了一个图像,只是为了复制图像)。它似乎工作得很好。@NikhilNanjappa它确实打开了一个新的模态,但是它没有将新图像放在模态2中,而是放在模态1中。它应该是modal2