Question

我有一张地图，我试图在单击某个区域时使用动态引导模式，我更喜欢使用悬停时显示的标签作为div，从模式中克隆内容。

因此使用将点击德克萨斯州并创建一个模态并使用id = modal-Texas克隆div。内容div是动态的，我无法更改德克萨斯州的ID。

同样在我的代码中我有模态显示，但它似乎没有移除关闭模式并将模态放在模态中。

$(document).ready(function () {

$（ '＃触点-MAP'）。CSS（{ 宽度：'100％'，身高：'450px'，填充：'15px' }）;

var customModal = $('<div class="modal fade bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="modal-us-tx"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button></div><div class="modal-body"></div></div></div></div>');

var RColor = '#007cc4'
var stateRedirects = [
    "US-VA", //Virginia
    "US-PA", //Pennsylvania
    "US-TN", //Tennessee
    "US-WV", //West Virginia
    "US-NV", //Nevada
    "US-TX", //Texas
    "US-NH", //New Hampshire
    "US-NY", //New York
    "US-HI", //Hawaii
    "US-VT", //Vermont
    "US-NM", //New Mexico
    "US-NC", //North Carolina
    "US-ND", //North Dakota
    "US-NE", //Nebraska
    "US-LA", //Louisiana
    "US-SD", //South Dakota
    "US-DC", //District of Columbia
    "US-DE", //Delaware
    "US-FL", //Florida
    "US-CT", //Connecticut
    "US-WA", //Washington
    "US-KS", //Kansas
    "US-WI", //Wisconsin
    "US-OR", //Oregon
    "US-KY", //Kentucky
    "US-ME", //Maine
    "US-OH", //Ohio
    "US-OK", //Oklahoma
    "US-ID", //Idaho
    "US-WY", //Wyoming
    "US-UT", //Utah
    "US-IN", //Indiana
    "US-IL", //Illinois
    "US-AK", //Alaska
    "US-NJ", //New Jersey
    "US-CO", //Colorado
    "US-MD", //Maryland
    "US-MA", //Massachusetts
    "US-AL", //Alabama
    "US-MO", //Missouri
    "US-MN", //Minnesota
    "US-CA", //California
    "US-IA", //Iowa
    "US-MI", //Michigan
    "US-GA", //Georgia
    "US-AZ", //Arizona
    "US-MT", //Montana
    "US-MS", //Mississippi
    "US-SC", //South Carolina
    "US-RI", //Rhode Island
    "US-AR" //Arkansas
];
var newHTML = $.map(stateRedirects, function(value) {
    return(value);
});

$('#contacts-map').vectorMap({



    map: 'us_en',
    backgroundColor: 'transparent',
    zoomOnScroll: false,
    zoomButtons: false,
    regionStyle: {
        initial: {
            fill: '#0071A4',
            scaleColors: ['#b7bdc3', '#a2aaad'],
            "fill-opacity": 1,
            stroke: '#ffffff',
            "stroke-width": 1,
            "stroke-opacity": 1
        },
        hover: {
            "fill-opacity": 0.8
        },
        selected: {
            fill: '#0071A4'
        },
        selectedHover: {
            fill: '#a2aaad'
        }
    },
    series: {
        regions: [{
            values: {
            //"el" : RColor,                
            //"be" : RColor
            },
        attribute: 'fill'
        }]
    },      
    onLabelShow: function(event, label, code){
        if($.inArray(code, stateRedirects) > -1){
            //do nothing
        }
        else if (code) { //if a state is not specified in var stateRedirects then prevent default
            event.preventDefault();
        }                   
    },      
    onRegionOver: function(event, code){
        if($.inArray(code, stateRedirects) > -1){
            $('#jvectormap1_' + code).css('cursor', 'pointer');
        }
        else if (code) { //if a state is not specified in var stateRedirects then prevent default
            event.preventDefault();
        }                   
    },
    onRegionClick: function (event, code) {            

        if($.inArray(code, stateRedirects) > -1){
            $('body').append(customModal);
            $('#modal-'+code.toLowerCase()).clone().appendTo('.modal .modal-body');             
            $('.modal').modal({
              backdrop: false
            });

            $('.modal').on('hidden', function(){                    
                $('.modal .modal-body').html('');
                $('body').remove(customModal);
            });
        }
        else if (code) { //if a state is not specified in var stateRedirects then prevent default
            //event.preventDefault();
        }   

    }
    });

}）;

我也有一个小提琴，但我知道如何让这个工作。在示例中，您将看到我有一个div，其内容为德克萨斯州和加利福尼亚州进行测试，但是当您点击它们时它们不起作用，所有其他区域也显示模式。

http://jsfiddle.net/abennington/ymgkkuzL/39/

jVectormap动态引导模式克隆单击动态内容div

0 个答案: