Creating a popup window using HTML

I am attempting to create a pop-up window using HTML, but I'm struggling to get it to appear in the desired way.

My goal is this: to have a pop-up show up when the profile image is clicked on.

Here's the HTML

<span class="profile"><img scr="" ></span>
<div class="popupwindow">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signout"/>
    </div>
</div>

Is jQuery necessary for this task?

https://i.sstatic.net/AxRhj.png

Answer №1

In the absence of jQuery:

<style>
.hidden {display:none}
</style>

<script>
function showPopup() {
    document.getElementById("popupWindow").classList.remove("hidden");
}
</script>

<span class="profile"><img src="https://i.sstatic.net/o2hxa.png" onclick="showPopup()"></span>
<div id="popupWindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signOut"/>
    </div>
</div>

Utilizing jQuery:

<style>
.hidden {display:none}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
$(function() {
    $(".profile img").click(function() {
        $("#popupWindow").show();
    });
});    
</script>

<span class="profile"><img src="https://i.sstatic.net/o2hxa.png"></span>
<div id="popupWindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signOut"/>
    </div>
</div>

Implementing jQuery UI:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/flick/jquery-ui.css" type="text/css">
<style>
.hidden {display:none}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>    
<script>
$(function() {
    $(".profile img").click(function() {
        $("#popupWindow").dialog({
            title: "My Popup Title",
            width: 600, 
            modal: true, 
            resizable: false
        });   
    });    
});
</script>

<span class="profile"><img src="https://i.sstatic.net/o2hxa.png"></span>
<div id="popupWindow" class="hidden">
    <div>
        <div>Name: Name Surname</div>
        <div>Code: code123</div>
    </div>
    <div>
        <input type="submit"  value="Sign Out" class="signOut"/>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does text display differently in HTML (Firefox) on Ubuntu compared to Windows 7?

When viewing the HTML and CSS code in Firefox on Windows, everything appears fine. However, when I view it in Firefox on Ubuntu, it looks out of place. How can this be corrected? Any suggestions? Additional information: The CSS code used for the text show ...

What is the significance of the "#" character in the URL of a jQuery mobile

As I encounter a strange issue with my jQuery mobile page, I notice that when accessing page.php everything looks good, but once adding #someDetailsHere to the URL, it only displays a blank white page. What could be causing this and how can I resolve it? ...

Obtaining the width of a child table using Jquery

I have a question that might seem simple, but I can't figure it out. How can I use jQuery to get the width of a table that is a child of a div with the class "test"? <div class="test"> <div id="one"> </div> <table> <thead&g ...

Alter Text Using Typewriter

Recently, I have been experimenting with code on my glitch website, trying to create typewriter text. Thanks to help from a user on StackOverflow, I was able to achieve this effect successfully. However, I am now facing a new challenge. My goal is to make ...

"Expand" Button following X buttons

Check out this JSFiddle for the code: $(document).ready(function(){ $( ".keywordsdiv" ).each(function(){ $(this).children(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>');//add a uniq ...

Guide on displaying a welcoming error notification within a Bootstrap modal form

How can I display an error message within a modal after clicking on the update button? In this example, I have included a required attribute on the input field. I would like to modify the error message based on recommendations from Form Validation Best Pr ...

When a sidebar is added, Bootstrap 5 cards that are supposed to be displayed in a row end up being shown in a column instead

When I have a row of Bootstrap 5 cards that display correctly, but then add a sidebar that causes them to stack in a column instead of remaining in a row. How can I maintain the row layout even with the addition of a sidebar using specific CSS classes or p ...

Enhance Your jQuery Experience with Advanced Option Customization

I am currently developing a plugin that deals with settings variables that can be quite deep, sometimes reaching 3-4 levels. Following the common jQuery Plugin pattern, I have implemented a simple method for users to update settings on the go using the not ...

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

I am currently using Bootstrap 5 to design a website and have incorporated a dropdown feature into the navigation bar. On desktop, when hovering over the dropdown, it should open, while on mobile, clicking the dropdown should toggle its visibility (open/cl ...

The Firefox extension is unable to activate any click events

Currently, I am developing a Firefox add-on with the goal of automatically filling in login form fields and submitting the login. For each website, I have access to various identifiers such as ids, classes or xpath, depending on what is provided by the web ...

Incorporating a JavaScript code into my SharePoint master page to automatically deselect a checkbox resulted in updating the page title

I've integrated the following JavaScript code into my SharePoint master page: <script type="text/javascript> function DefaultUploadOverwriteOff() { if (document.title== "Upload a document") { var input=document.querySelectorAll("input"); ...

I keep encountering an error stating that parameter 1 for 'FormData' is not of type 'HTMLFormElement'. I am struggling to resolve this issue on my own. Can someone please assist me with fixing this problem?

Here is the snippet of code that I am struggling with: const authForm = useRef(); const handleSubmit = (e) => { e.preventDefault(); //formData let form = new FormData(authForm.current); console.log(form) } This code snippet shows how I added a ...

What is causing the data element to remain unchanged within a Vue.js function and what steps can be taken to ensure its value can be updated?

Using the axios API in the created() function, I am able to access webURLs. When a mouseover event triggers a v-for handler in the HTML file, the index is obtained and assigned to the selectedState data element. Although the value of selectedState changes ...

Arranging an Array by Two Distinct Characteristics

I currently have an array that is grouped and sorted based on the "Program" attribute, which is working well. However, I now need to sort by a different attribute (Deliverable) within each group. Is this possible? If so, how can I achieve it? Below is an ...

When scrolling, the menu is being overlapped by the Carousel in HTML5, CSS3, and

I am currently working on a One Page HTML webpage that needs to be responsive, and the requirement is to use Bootstrap. I have gone through all the tags but can't seem to identify the issue. One problem I encountered is that when I scroll down the pa ...

Right and left floating elements align side by side

The alignment of the images and file labels needs adjustment to ensure they all appear on the same line. Below is the code snippet that I have tried: HTML: <div> <img src="{{asset('bundles/cramifaccueil/images/pdfdocument.png')} ...

Difficulty achieving transformation of one div element within another div element

My aim is to create a unique hover effect for a button where it tilts slightly without affecting the text. You can view my progress here: https://codepen.io/kyannashanice/pen/QWveOMg I tried stacking the text and button in separate divs and triggering the ...

Cannot find JS variable after loop has completed

I am struggling to understand why the value of my variable is not changing in my function. Here is my code snippet: var count = function(datain){ let temparr = [], countobj = {}; $.each(datain, function(key, val) { console.log(temparr); cou ...

The behavior of Material-UI Drawer varies when used on tablets

Encountering some strange issues with the Material-UI drawer component. It's scrolling horizontally on my iPad, while it scrolls vertically on my MacBook and Android Phone. Expected Result on MacBook: https://i.sstatic.net/txBDf.png On my MacBook, it ...

Tips for correcting boolean checks and verification for undefined variables

Currently, I am working on a code where I need to verify the truthfulness of variables $scope.bankregel and $scope.showInvoices. Within my function, I'm already implementing a conditional check in the if and else if statements. How can I incorporate ...