Mixing
D3 open bootstrap modal from .onclick
1
I have a chart in D3. I want to be able to click on a certain part of my chart and open a bootstrap modal, passing through some data. My d3 code looks like this
svg.append("g")
.attr("class", "stores")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.on("click", function(d){
('#exampleModal').trigger('click')
});
My html looks like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
How can i open my precreated bootstrap modal within a click in my d3 chart?
javascript twitter-bootstrap d3.js
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
|
show 1 more comment
1
I have a chart in D3. I want to be able to click on a certain part of my chart and open a bootstrap modal, passing through some data. My d3 code looks like this
svg.append("g")
.attr("class", "stores")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.on("click", function(d){
('#exampleModal').trigger('click')
});
My html looks like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
How can i open my precreated bootstrap modal within a click in my d3 chart?
javascript twitter-bootstrap d3.js
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
Can you please addd3.event.stopPropagation();after you trigger the modal click and try again?
– Adrian Pop
Nov 20 '18 at 8:27
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
Trigger the click by doing$("#exampleModal").click();or$("#exampleModal").trigger('click');and try again please :)
– Adrian Pop
Nov 20 '18 at 8:31
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36
|
show 1 more comment
1
1
1
I have a chart in D3. I want to be able to click on a certain part of my chart and open a bootstrap modal, passing through some data. My d3 code looks like this
svg.append("g")
.attr("class", "stores")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.on("click", function(d){
('#exampleModal').trigger('click')
});
My html looks like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
How can i open my precreated bootstrap modal within a click in my d3 chart?
javascript twitter-bootstrap d3.js
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
I have a chart in D3. I want to be able to click on a certain part of my chart and open a bootstrap modal, passing through some data. My d3 code looks like this
svg.append("g")
.attr("class", "stores")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.on("click", function(d){
('#exampleModal').trigger('click')
});
My html looks like this
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
How can i open my precreated bootstrap modal within a click in my d3 chart?
javascript twitter-bootstrap d3.js
javascript twitter-bootstrap d3.js
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
edited Nov 20 '18 at 8:38
jumpman8947
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
asked Nov 20 '18 at 8:22
jumpman8947jumpman8947
26919
26919
Can you please addd3.event.stopPropagation();after you trigger the modal click and try again?
– Adrian Pop
Nov 20 '18 at 8:27
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
Trigger the click by doing$("#exampleModal").click();or$("#exampleModal").trigger('click');and try again please :)
– Adrian Pop
Nov 20 '18 at 8:31
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36
|
show 1 more comment
Can you please addd3.event.stopPropagation();after you trigger the modal click and try again?
– Adrian Pop
Nov 20 '18 at 8:27
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
Trigger the click by doing$("#exampleModal").click();or$("#exampleModal").trigger('click');and try again please :)
– Adrian Pop
Nov 20 '18 at 8:31
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36
Can you please add
d3.event.stopPropagation(); after you trigger the modal click and try again?– Adrian Pop
Nov 20 '18 at 8:27
Can you please add
d3.event.stopPropagation(); after you trigger the modal click and try again?– Adrian Pop
Nov 20 '18 at 8:27
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
Trigger the click by doing
$("#exampleModal").click(); or $("#exampleModal").trigger('click'); and try again please :)– Adrian Pop
Nov 20 '18 at 8:31
Trigger the click by doing
$("#exampleModal").click(); or $("#exampleModal").trigger('click'); and try again please :)– Adrian Pop
Nov 20 '18 at 8:31
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36
|
show 1 more comment
1 Answer
1
active
oldest
votes
1
I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.
Cheers!
var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388842%2fd3-open-bootstrap-modal-from-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.
Cheers!
var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
add a comment |
1
I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.
Cheers!
var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
add a comment |
1
1
1
I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.
Cheers!
var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
I guess you actually have to use the .show() method the modal has and not a click trigger (or method). A modal is triggered by show or hide. Below is a simple example that works, I guess you can apply this to your code too.
Cheers!
var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>var modal = document.getElementById('myModal');
var svg = $("#mysvg");
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
svg.on("click", function(d){
$("#myModal").show();
});/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
<figcaption>A graph that shows the number of fruit collected</figcaption>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="chart" width="420" height="150" aria-labelledby="title" role="img" id="mysvg">
<title id="title">A bart chart showing information</title>
<g class="bar">
<rect width="40" height="19"></rect>
<text x="45" y="9.5" dy=".35em">4 apples</text>
</g>
<g class="bar">
<rect width="80" height="19" y="20"></rect>
<text x="85" y="28" dy=".35em">8 bananas</text>
</g>
<g class="bar">
<rect width="150" height="19" y="40"></rect>
<text x="150" y="48" dy=".35em">15 kiwis</text>
</g>
<g class="bar">
<rect width="160" height="19" y="60"></rect>
<text x="161" y="68" dy=".35em">16 oranges</text>
</g>
<g class="bar">
<rect width="230" height="19" y="80"></rect>
<text x="235" y="88" dy=".35em">23 lemons</text>
</g>
</svg>
</figure>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
answered Nov 20 '18 at 8:42
Adrian PopAdrian Pop
8661921
8661921
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388842%2fd3-open-bootstrap-modal-from-onclick%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you please add
d3.event.stopPropagation();after you trigger the modal click and try again?– Adrian Pop
Nov 20 '18 at 8:27
I get the error Uncaught TypeError: "#exampleModal".trigger is not a function
– jumpman8947
Nov 20 '18 at 8:30
Trigger the click by doing
$("#exampleModal").click();or$("#exampleModal").trigger('click');and try again please :)– Adrian Pop
Nov 20 '18 at 8:31
Nothing comes up
– jumpman8947
Nov 20 '18 at 8:35
Shouldn't you actually simulate the click on the button, and not on the modal, since the button is the element that opens it?
– Adrian Pop
Nov 20 '18 at 8:36