RE: Help me with my new website!
May 9, 2018 at 8:42 pm
(This post was last modified: May 9, 2018 at 8:59 pm by bennyboy.)
(May 9, 2018 at 8:19 pm)KevinM1 Wrote: @bennyboy, wouldn’t toggle() be the better option in that example?
It doesn't really matter much. I was using different objects to show and hide the popup, so I gave them dedicated functions. You could also attach the click event to a class-defined collection (using "." instead of "#"), so clicking anything that has that class name will toggle the popup.
https://jsfiddle.net/1u6wzs7q/2/
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$(".PopupToggler").click(function () {
$("#MyPopup").toggle();
});
});
</script>
<span class="PopupToggler" style="cursor:pointer; background-color:darkturquoise">Click on me!</span>
<div id="MyPopup" class="PopupToggler" style="display: none; cursor:pointer; z-index:1; position: fixed; top: 45%; bottom: 45%; left: 40%; right: 40%; background-color:pink">Oh snap! You went and done did it now! </div>
</form>
</body>
</html>Off-topic but maybe interesting:
I very often use a class-collection technique in jQuery for making repeatable custom controls, making the class name also include some kind of useful information. For example, I'll have a picture control with a class name "UserImage ###" where ### is a userID. Then when any "UserImage" control is clicked, the ".UserImage" click handler parses the UserID out of the class name, and does something useful with it (add homework to that student, delete them, whatever).
It's a very nice little trick, actually, for controlling a lot of repeatable objects which need to carry their own information: a collection of cards you want to be able to turn over for a game, items in a graph that you want to be able to click to use JASON to populate an order popup, etc. You can also use mouseover events to popup the name of an image and so on very easily.
