[英]open modal inside Jquery
I have inherited a project and it needs some amendments but i can't work out everything that has been done an why. 我已经继承了一个项目,它需要进行一些修改,但是我无法解决已经完成的所有工作,这是为什么。
Basically it is a map that is split into regions. 基本上,它是一张地图,分为多个区域。 When you mouse over a region a the region changes colour and a tooltip pops up. 当您将鼠标悬停在某个区域上时,该区域会更改颜色并弹出一个工具提示。
This is fine for now. 现在很好。 But i would also like to add a click functionality to it but for the life of me i can't figure out how. 但是我也想为其添加点击功能,但是对于我一生来说,我不知道如何操作。 Most of the data seems to be stored in a JS file: 大部分数据似乎存储在JS文件中:
jQuery(function($) {
$(function() {
debugger;
$("#unmaskUKMap").mapael({
map: {
// Set the name of the map to display
name: "uk_new",
defaultArea: {
attrs: {
stroke: "#fff",
"stroke-width": 1,
"fill": "#D0D0D0"
},
attrsHover: {
"stroke-width": 2,
"fill": "#0065AE"
}
}
},
areas: {
"wales": {
href: "#",
tooltip: {
content: "<h3>Wales</h3>" +
"Number of insolvencies" +
"<ul>" +
"<li><span class='quarter'>Q1 2014: </span><span>134</span></li>" +
"<li><span class='quarter'>Q1 2015: </span><span>137</span></li>" +
"</ul>" +
"<ul>" +
"High Risk Sectors" +
"<li>Services</li>" +
"<li>Construction</li>" +
"<li>Retail</li>" +
"</ul>"
}
},
So as you can see you mouse over the tooltip pops up and it colours the area. 这样就可以看到鼠标悬停在工具提示上,并为该区域着色。
What i would like to do it somehow be able to trigger a modal to open on click. 我想以某种方式能够触发点击打开模式。
Normally I would use: 通常我会使用:
<a href="#myModalBigDataSearching" role="button" data-toggle="modal"</a>
Although in this case I don't need a button so i guess i remove the role part. 尽管在这种情况下,我不需要按钮,所以我想我删除了角色部分。
I can't add this to any of the areas as it breaks the rest of the code and i can't find how to add it to the href : section either of if this is even possible? 我无法将其添加到任何区域,因为它破坏了其余的代码,并且我什至找不到如何将其添加到href:部分,即使有可能呢?
looks like you are using the jQuery Mapael plugin to handle your maps. 看起来您正在使用jQuery Mapael插件来处理地图。 I got this code snippet from their documentation; 我从他们的文档中得到了这段代码。 it adds functions to handle events in your map (such as 'click' as per the example). 它添加了一些功能来处理地图中的事件(如示例中的“ click”)。 You should add it to your code right after the attrsHover: { ...... },
portion. 您应该在attrsHover: { ...... },
部分之后立即将其添加到代码中。
Hope this helps. 希望这可以帮助。
eventHandlers: {
click: function (e, id, mapElem, textElem) {
// YOUR CODE HERE
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.