Javascript modal using class which can be used as a template for multiple buttons on a single page
1
I am trying to code a project that I created with Adobe Muse, the previous project can be found here.
On that page when you click on each of the circular buttons you get a pop up / modal box with some text.
Ideally I would like to create a javascript pop up / modal like my previous design, but as a template which uses a 'class', and '.this', so i can use that code across the thirty or so buttons there are on the page. I haven't quite found what I am looking for as everything I have found uses as 'IDs' and is a single button example.
This is the main tree and here are the .js files, it is what I have so far.
I would appreciate any help or ideas, thanks!
javascript modal-dialog popup
asked Nov 10 at 23:21
Sammii
165
add a comment |
1
I am trying to code a project that I created with Adobe Muse, the previous project can be found here.
On that page when you click on each of the circular buttons you get a pop up / modal box with some text.
Ideally I would like to create a javascript pop up / modal like my previous design, but as a template which uses a 'class', and '.this', so i can use that code across the thirty or so buttons there are on the page. I haven't quite found what I am looking for as everything I have found uses as 'IDs' and is a single button example.
This is the main tree and here are the .js files, it is what I have so far.
I would appreciate any help or ideas, thanks!
javascript modal-dialog popup
asked Nov 10 at 23:21
Sammii
165
add a comment |
1
1
1
I am trying to code a project that I created with Adobe Muse, the previous project can be found here.
On that page when you click on each of the circular buttons you get a pop up / modal box with some text.
Ideally I would like to create a javascript pop up / modal like my previous design, but as a template which uses a 'class', and '.this', so i can use that code across the thirty or so buttons there are on the page. I haven't quite found what I am looking for as everything I have found uses as 'IDs' and is a single button example.
This is the main tree and here are the .js files, it is what I have so far.
I would appreciate any help or ideas, thanks!
javascript modal-dialog popup
asked Nov 10 at 23:21
Sammii
165
I am trying to code a project that I created with Adobe Muse, the previous project can be found here.
On that page when you click on each of the circular buttons you get a pop up / modal box with some text.
Ideally I would like to create a javascript pop up / modal like my previous design, but as a template which uses a 'class', and '.this', so i can use that code across the thirty or so buttons there are on the page. I haven't quite found what I am looking for as everything I have found uses as 'IDs' and is a single button example.
This is the main tree and here are the .js files, it is what I have so far.
I would appreciate any help or ideas, thanks!
javascript modal-dialog popup
javascript modal-dialog popup
asked Nov 10 at 23:21
Sammii
165
asked Nov 10 at 23:21
Sammii
165
edited Nov 10 at 23:58
asked Nov 10 at 23:21
Sammii
165
asked Nov 10 at 23:21
Sammii
165
asked Nov 10 at 23:21
Sammii
165
165
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
on tag can have multiple class. you should use it.
<button class="template other_class1 other_class2" />
<button class="template other_class1 other_class2" />
This is separated by a space.
and, id attribute should unique in one html docs. That is desirable.
//edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>right?
if you want use hover, maybe more simple.
<script>
$(".modal").hover(function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>
arg 1 is function to hover, arg 2 is function to out from hover
answered Nov 11 at 0:07
곽대용
455
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
|
show 3 more comments
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%2f53244384%2fjavascript-modal-using-class-which-can-be-used-as-a-template-for-multiple-button%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
0
on tag can have multiple class. you should use it.
<button class="template other_class1 other_class2" />
<button class="template other_class1 other_class2" />
This is separated by a space.
and, id attribute should unique in one html docs. That is desirable.
//edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>right?
if you want use hover, maybe more simple.
<script>
$(".modal").hover(function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>
arg 1 is function to hover, arg 2 is function to out from hover
answered Nov 11 at 0:07
곽대용
455
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
|
show 3 more comments
0
on tag can have multiple class. you should use it.
<button class="template other_class1 other_class2" />
<button class="template other_class1 other_class2" />
This is separated by a space.
and, id attribute should unique in one html docs. That is desirable.
//edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>right?
if you want use hover, maybe more simple.
<script>
$(".modal").hover(function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>
arg 1 is function to hover, arg 2 is function to out from hover
answered Nov 11 at 0:07
곽대용
455
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
|
show 3 more comments
0
0
0
on tag can have multiple class. you should use it.
<button class="template other_class1 other_class2" />
<button class="template other_class1 other_class2" />
This is separated by a space.
and, id attribute should unique in one html docs. That is desirable.
//edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>right?
if you want use hover, maybe more simple.
<script>
$(".modal").hover(function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>
arg 1 is function to hover, arg 2 is function to out from hover
answered Nov 11 at 0:07
곽대용
455
on tag can have multiple class. you should use it.
<button class="template other_class1 other_class2" />
<button class="template other_class1 other_class2" />
This is separated by a space.
and, id attribute should unique in one html docs. That is desirable.
//edit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>right?
if you want use hover, maybe more simple.
<script>
$(".modal").hover(function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
$("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>
arg 1 is function to hover, arg 2 is function to out from hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>
<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue; display: none">
modal2
</div>
<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green; display: none">
modal3
</div>
</body>
</html>
<script>
$(".modal").click(function(){
var _button = $(this).attr('id');
var isOpen = $("."+_button+"_modal").css('display') === 'block';
if(isOpen){
$("."+_button+"_modal").css('display', 'none');
}else{
$("."+_button+"_modal").css('display', 'block');
}
})
</script>answered Nov 11 at 0:07
곽대용
455
edited Nov 11 at 1:38
answered Nov 11 at 0:07
곽대용
455
answered Nov 11 at 0:07
곽대용
455
answered Nov 11 at 0:07
곽대용
455
455
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
|
show 3 more comments
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
I know about multiple HTML classes. I need to know about how to write a modal with javascript which uses a class so I can use it multiple times on the same page. But thank you for your time.
– Sammii
Nov 11 at 0:13
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
sorry. i cant understand use a button multiple time use for modal. i need more information for detail implement.
– 곽대용
Nov 11 at 0:48
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
then , are you want open & close to modal by one button?
– 곽대용
Nov 11 at 0:52
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
Please review this example. In this example you can see that each circular button opens a pop up window with some information. I would like a way to code one pop up button template, and by using the .this event selector it assures that the script only works for the element which is being currently selected. I would also like to create a modal which uses a class sector so I can use it across all of the buttons on that single page timeline.
– Sammii
Nov 11 at 0:59
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
ok, are you want to jquery? or vanila javascript?
– 곽대용
Nov 11 at 1:08
|
show 3 more comments
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53244384%2fjavascript-modal-using-class-which-can-be-used-as-a-template-for-multiple-button%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
