Как вывести jqvmap в полноэкранное модальное окно?

466
24 ноября 2016, 09:55

Есть проект в котором необходимо интерактивно использовать выбор страны, наткнулся на компонент - jqvmap который собственно позволяет отобразить карту и получить код страны в формате ISO...

Каким образом эту карту можно отобразить в модальном окне?

 jQuery(document).ready(function () { 
        jQuery('#vmap').vectorMap({ 
          map: 'world_en', 
          backgroundColor: '#333333', 
          color: '#ffffff', 
          hoverOpacity: 0.7, 
          selectedColor: '#666666', 
          enableZoom: true, 
          showTooltip: true, 
          scaleColors: ['#C8EEFF', '#006491'], 
          values: sample_data, 
          normalizeFunction: 'polynomial' 
        }); 
jQuery(".openMap").click(function(){ 
		$("#vmap").show(function(){ 
			$("#vmap").addClass("show"); 
		}); 
	}); 
 
      });
body{ 
margin:0; 
padding:0; 
} 
#vmap { 
    width: 100%; 
    height: 100vh; 
	/*background-color: red;*/ 
	display:none; 
} 
.show{ 
	position:fixed; 
	bottom:0; 
	top:0; 
	left:0; 
	right:0; 
	overflow:hidden; 
}
<link href="http://semenov.ru.com/dist/jqvmap.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://semenov.ru.com/dist/jquery.vmap.js"></script> 
<script src="http://semenov.ru.com/dist/maps/jquery.vmap.world.js"></script> 
<script src="http://semenov.ru.com/dist/js/jquery.vmap.sampledata.js"></script> 
<a href="#" class="openMap">Open</a> 
	<p>Какой то текст</p> 
	<p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p><p>Какой то текст</p> 
<div id="vmap"></div>

READ ALSO
Как связать Select с Input с помощью Jquery?

Как связать Select с Input с помощью Jquery?

Здравствуйте. Вопрос такой.

640
Не срабатывает select OnChange

Не срабатывает select OnChange

Добрый день. Столкнулся с проблемой, не могу проверить.

406
Поиск в тексте конструкции слово1|слово2|слово3 через regExp

Поиск в тексте конструкции слово1|слово2|слово3 через regExp

Как встроить regExp в js для того, чтобы найти в тексте конструкцию слово1|слово2|слово3 и вернуть массив [слово1, слово2, слово3]? Насколько смог...

333
Добавление/Удаления класса active

Добавление/Удаления класса active

Всем привет! Добивался 30 минут попытки удаления и добавления класса active для ссылок. Вроде код правильный, но у меня не переходит на другие...

395