Question

我试图通过ajax将特定内容从页面拉入bootstrap 3模式，但只能拉入整个页面。

这是我的jQuery代码：

function wineMap() {

    var wh = $(window).height();
    var hh = $('#masthead').height();
    $('.wine-menu #mainstage').css({
        height: wh-hh-80
    });
    $('#wine-map').vectorMap({
        map: 'world_en',
        backgroundColor: '#000',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        scaleColors: ['#ffffff', '#eeeeee'],
        normalizeFunction: 'polynomial',
        onRegionClick: function(element, code, region){
            if (code == 'us')    {
                var url = 'http://cb.dannycheeseman.me/wine-menu/'+code;
            }
            $('#theModal').modal({
                show : true,
                remote: url
            });
        }
    });
}

$(document).ready(function(e) {
    wineMap();
});

这是网址http://cb.dannycheeseman.me/wine-menu/（点击美国）

我试过了：

function wineMap() {

    var wh = $(window).height();
    var hh = $('#masthead').height();
    $('.wine-menu #mainstage').css({
        height: wh-hh-80
    });
    $('#wine-map').vectorMap({
        map: 'world_en',
        backgroundColor: '#000',
        color: '#ffffff',
        hoverOpacity: 0.7,
        selectedColor: '#666666',
        enableZoom: true,
        scaleColors: ['#ffffff', '#eeeeee'],
        normalizeFunction: 'polynomial',
        onRegionClick: function(element, code, region){
            if (code == 'us')    {
                var url = 'http://cb.dannycheeseman.me/wine-menu/'+code;
            }
            $('#theModal').modal({
                show : true,
                remote: url+'#menu-home-location'
            });
        }
    });
}

$(document).ready(function(e) {
    wineMap();
});

请注意：

                remote: url+'#menu-home-location'

我希望只提供该ID的内容，但它仍然会拉动整个页面..

此致

Answer 1

好的，所以在阅读了jQuery加载函数之后，我意识到你需要一个空格才能添加你想要添加的内容的id：

            $('#theModal').modal({
                show : true,
                remote: url+'#menu-home-location'
            });

变为：

            $('#theModal').modal({
                show : true,
                remote: url+' #menu-home-location'
            });

效果很好。

从页面获取特定内容通过ajax插入bootstrap 3模态

1 个答案: