Javascript modal using class which can be used as a template for multiple buttons on a single page
up vote
1
down vote
favorite
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 |
up vote
1
down vote
favorite
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 |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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
up vote
0
down vote
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
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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
up vote
0
down vote
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
up vote
0
down vote
up vote
0
down vote
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
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
