jQuery:在模式窗口中加载文件 [英] JQuery : Load a file in modal window

问题描述

我在图像点击上获得了这样的文件名

I am getting a file name on image click like this

<a href="#"  class="aclick" >
   <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

现在在这里弹出一个模式窗口，我有一个页面链接 petroliumjelly.php ，我想在该模式窗口中打开.

Now there pops up a modal window here and i have the page link petroliumjelly.php that i want to open in that modal window .

  <script type="text/javascript" language="javascript">
       $(".aclick").click(function (e) {
        e.preventDefault();
        var id = $(this).attr('id');
        var link = $(this).data("data-link");
        console.log(id);
        console.log(link);
        $('#modal_'+id).modal('show');
        $page = $(this).find('img').attr("data-link"); 
        //$('.modal-body')// load page her 
    });

</script> 

如何在模式窗口中加载该页面，请帮助.

How can i load that page in modal window please help .

推荐答案

.aclick没有id和data-link，它们将返回undefined，您需要查找图像并获取这些图像从图像.要获取data-link，请使用().data('link')而不是data('data-link').要以模式加载文件，您必须使用 AJAX 或整理文件.

The .aclick doesn't have an id and data-link, they will return undefined, you need to find the image and get those from the image. To get the data-link use ().data('link') not data('data-link'). To load the file in your modal you'll have to use AJAX or the .load() to laod a file.

<script>
    $(".aclick").click(function (e) {
        e.preventDefault();
        $image = $(this).find('img');
        var id = $($image).attr('id');
        var link = $($image).data("link");
        console.log(id);
        console.log(link);
        $('#modal_'+id).modal('show');

        // using AJAX to fetch the file
        $.get(link, function (response) {
            $('.modal-body').html(response);
        })
    });
</script>

或使用modal.load()加载文件.

<script>
    $(".aclick").click(function (e) {
        e.preventDefault();
        $image = $(this).find('img');
        var id = $($image).attr('id');
        var link = $($image).data("link");
        console.log(id);
        console.log(link);

        // load the file
        $('.modal-body').load(link, function () {
            $('#modal_'+id).modal('show');
        })
    });
</script>

这篇关于jQuery:在模式窗口中加载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！