Question

我有这个网页，只是为了开始使用网页，基于这个模板。

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

在点击投资组合中的缩略图时，会打开另一个网页，其中包含有关图片的更多详细信息。我写的代码正在加载页面。我想在此模板中完全实现它。

html（缩略图）：

<div class = "pictures ">
            <div class = "container ">
                <div >

                    <center><b><text>PORTFOLIO</text></b></center>
                </div>
                <div class = "pics">
                  <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img data-src = "glass.png" src = "cabin.png" id="cabin" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "cake.png" id="cake" alt="" />
                    </div>
                    </div>
                </div>
                    <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img  data-src = "glass.png" src = "circus.png" id="circus" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "game.png" id="game" alt="" />
                    </div>

                    </div>
                    </div>
                    <div class = "column">
                    <div class = "col-md-4">
                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "safe.png" id="safe" alt="" />
                    </div>

                    <div class = "thumbnail">
                        <img data-src="glass.png" src = "submarine.png" id="submarine" alt="" />
                    </div>
                    </div>

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

用于打开新页面的Jquery：

$(".pictures .thumbnail img").click ( function () {
                    window.location.href = this.id +".html";

                });

我应该对我的代码进行哪些更改，以便我可以在不加载/刷新的情况下打开页面？

提前感谢！

Answer 1

你应该学习一些AJAX来实现这一目标。请阅读jQuery Docs on AJAX了解详情。

Ajax 是一个客户端脚本，可以与服务器/数据库进行通信，而无需回发或完整页面刷新。我为Ajax阅读的最佳定义是“与服务器交换数据，更新网页部分的方法 - 无需重新加载整个页面。”来源：Seguetech

以下是AJAX和jQuery的一些示例：

$(document).ready(function(e) {

    $("form[ajax=true]").submit(function(e) {

        e.preventDefault();

        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();

        $("#loadingimg").show();

        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                          
                $("#result").html(returnhtml); 
                $("#loadingimg").hide();                    
            }           
        });    

    });

});

DEMO

无畏。它看起来有点令人困惑，特别是刚刚开始使用jQuery，但相信我并非如此。你会很高兴你学到了它。

Answer 2

您指的模板使用引导模式。另外，要动态获取数据以填充模态，您需要了解Ajax。 Boy Wonder已经给出了一个定义。但是你也可以在不从服务器站点获取数据的情况下填充模态，毕竟它可以是静态的。您可以从这里http://getbootstrap.com/javascript/#modals

了解bootstrap模态

使用jquery

2 个答案: