Question

我创建了一个用户点击图片时查看图片的模型。问题是当我尝试从模式内容中的图库图像访问图像时，它不起作用。只显示一个空白弹出窗口。我希望显示图库中的图片。

我需要知道我可以使用哪些代码来访问模态内容中的图库图像。

<body>

<script type="text/javascript">
    var gallery = [
        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

        {
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },{
            "img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
            "text": "Add a description of the image heree",
        },

    ]
    function view(imgsrc) {
        vieww = window.open(imgsrc, 'viewwin', 'width=600,height=300');
    }

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) {
            output += '<div class="gallery"><a target="_blank" rel="noopener 
         noreferrer">';
            output += ' <a target="_blank" rel="noopener noreferrer">';
            output += '     <img src="' + gallery[i].img + '" 
         onclick="view("' + gallery[i].img + '")" data-toggle="modal" data-
         target="#myModal" alt="Forest" width="600" height="400" /';
            output += ' </a>';
            output += ' <div class="desc">' + gallery[i].text + '</div>';
            output += '</div>';
        }
        document.getElementById('output').innerHTML = output;
    }
    window.onload = function () {
        RenderHtml();
    }
     </script>
    <div id="output">

    </div>
     <!-- Modal -->
     <div class="modal fade" id="myModal" role="dialog">
     <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;
          </button>

          <h4 class="modal-title">Modal Header</h4>

        </div>
        <div class="modal-body">
                <!-- I want images from gallery array to be shown here when 
          user clicks on any of the images -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-
                dismiss="modal">Close</button>
             </div>
            </div>

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

       </html>

Answer 1

嗨this link帮助你。只需改变这个（window.open (imgsrc, 'viewwin', 'width = 600, height = 300'））因为bootstrap是一个很好的解决方案：））

用户点击时显示图片？

2 个答案: