As a beginner in HTML/CSS, I'm interested in learning how to create a small pop-up window that appears when a button or link is clicked. An example of what I'm looking to achieve can be seen on this website: . You can see the functionality by clicking the "Info" button on a movie card. Here's a photo example
Check out this snippet:
<!doctype html>
<html lang="en">
<head>
<!-- Necessary meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e4fee5fee3">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Modal</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<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">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
This is a modal. Customize it as you wish.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27574857574255094d5467160916110916">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c1dbc0dbc6">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>You have the freedom to edit it in any way you prefer.
To achieve this effect using only CSS, you can create a separate container with the class "popup." Inside this container, add another container for the popup content. Set the background of the parent popup container to rgba(black,0.7);, and ensure that it has visibility:hidden; opacity:0 initially.
Assign the id="popup" to the parent container so that it has both an id and a class of "popup."
The element that triggers the popup display should be an anchor tag with href="#popup", like this:
<a href="#popup">Info</a>:target pseudo-class in your CSS code:
.popup{
height: 100vh;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(black, 0.7);
z-index: 100;
opacity: 0;
visibility: hidden;
}
.popup:target {
opacity:1;
visibility: visible
}
To close the popup window, include an "x" button in the upper right corner as an anchor tag with href="#home_page". Give the home page section the id="home_page", so clicking the button will redirect you to the Home page.
Hello, I currently have 2 text fields and 2 checkboxes: <input type="checkbox" id="class1"> <input type="checkbox" id="class2"> <div id="hidden"> <input type="text" id="valclass1"> <input type="text" id="valclass2"> </div ...
One element of my website relies on the following .js code snippet: items.add( `field-${field.id()}`, <div className="Mason-Field Form-group"> <label> {field.icon() ? <>{icon(field.icon())} & ...
I have a list of items that I want to display as image cards with an active blue border when clicked. Only one item can be selected at a time. Below is the code snippet: Template Code <div class="container"> <div v-for="(obj ...
After integrating a button group into my new website, I noticed that the first two buttons stop functioning properly on smaller screens. Surprisingly, if I remove the text-center div, all buttons cease to work entirely. Despite attempting various solution ...
I'm trying to figure out how to adjust my code so that the border surrounding my text stays in position and changes size when I input longer text. Here is the code I'm currently working with: <h1 id="result" style="color:black; font-family: B ...
As a newcomer to front end coding, I am currently working on a practice website to familiarize myself with the code. One issue I am facing is related to using a bootstrap grid with an image in the left column. I want to prevent the image size and position ...
Feeling a bit overwhelmed trying to solve what seems like a simple issue. I have a collection of reports on an internal network (not accessible from the outside) and each report includes a form with various HTML inputs that adjust the report data. The pr ...
After using a Yo Angular-Fullstack generator (https://github.com/DaftMonk/generator-angular-fullstack) to start an app, I attempted to install Toastr from bower with the command: bower install angular-toastr Now, I need to add the toastr css and js files ...
I need to execute a C# function when a button is clicked that captures a rating (1-7) and saves it to a database along with a text input. Here is the feedback section: <asp:PlaceHolder ID="AnswersPlaceholder" runat="server" Visible="false"> <asp ...
Is there a reason why aligning an arbitrary image horizontally is so challenging (or as one response mentioned, "It is not possible.")? I previously had centered images that were functioning correctly for years; however, suddenly they stubbornly position t ...
I have encountered an issue with my web page that triggers a HTML5 SharedWorker script. Interestingly, each time I refresh the page (using F5), the memory usage in Chrome increases. The worker script is quite basic. It simply sends a message to the connec ...
Looking to utilize jQuery AJAX calls? Here's an example: function addNewTeacher(){ $.ajax({ type: "POST", url: "/actions/dboss/newteacher.php", data: "uname=" + $("#newteacheruname").val() + "&upass=" + $("#new ...
.blogimgarea { width: 38%; padding-right: 26px; float:left; } img{max-width:100%} .blogtextarea { width:55%; padding:22px 32px 0 0; float:right; } <div class="newpostregion pt70"> <div class="blogimgarea"> <img class="featblogimg" src="https ...
Can a unique identifier be assigned to each menu item generated using the <TablePagination> component? I would like to add a specific ID (e.g., id="menu_item_0", id="menu_item_1" & id="menu_item_2") to the menu item ...
Is it feasible to utilize various libraries such as Node.JS, JQuery, and LimeJS together without any limitations? ...
While following a tutorial on YouTube for creating a simple web game with lobbies/rooms, I encountered an issue. When attempting to establish a connection between the client and server, the expected "a user connected" text did not show up in the console as ...
As a beginner in JQuery, I am exploring various functions available online, one of which enables the display of a tooltip when hovering over an HTML element. This is the specific function: <script> $(document).ready(function() { $('#my-tool ...
I'm attempting to create a website navigation bar using radio buttons, where the pages are displayed based on the selection. So far, I've managed to achieve this using <a href='#div'></a> and a :target, by placing the .page ...
I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...
Looking to add a PNG image to a menu, similar to the one showcased below: https://i.sstatic.net/YOXpM.jpg My current approach involves using position: absolute and z-index, but I'm encountering issues when the menu ends up behind the PNG image. Is t ...