I am currently designing a Twitter website, but I am facing difficulty in solving a particular issue. The problem arises when I try to click on this button:
https://i.sstatic.net/g8piA.png
My expectation is to see a result similar to this:
https://i.sstatic.net/wvygw.jpg
The background should appear as shown and a form should pop up on the screen. Can anyone suggest a solution for this dilemma? While I am skilled in HTML DOM, I am struggling to come up with the algorithm needed to resolve this.
Another method to achieve this is by utilizing a pre-existing modal box (div) that remains hidden until a specific button is clicked.
For instance, consider the following scenario where an overlay is included to appear behind the modal box. Upon clicking on the overlay while the modal box is visible, it will be hidden again.
$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>If you want to achieve this, you have the option of utilizing either JavaScript or jQuery.
Here is an example:
$(".mybutton").click(() => {
$("body").append(`
<div class="modals">
Insert your code here
</div>
`)
}).modals{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
padding: 40px 30px;
background-color: #e2e2e2;
border-radius: 4px;
}<button class="mybutton">Open</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$('#button').click(() => {
var display = $('#popup').css('display');
if (display === "none") {
$('#popup').show();
$('#overlay').fadeIn();
}
else {
$('#popup').hide();
$('#overlay').fadeOut();
}
});
$('#overlay').click(() => {
$('#popup').hide();
$('#overlay').fadeOut();
});* {
margin: 0;
padding: 0;
}
#popup {
position: absolute;
background-color: #fff;
padding: 6%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
border-radius: 30px;
z-index: 10;
display: none;
}
#overlay {
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="overlay"></div>
<div id="button">Click me</div>
<div id="popup">Text</div>
</body>
</html>Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...
After reviewing the documentation at this link: I discovered a method to modify or add the default class of the loader widget, ui-loader. Despite my attempts, I have not been able to see any changes. You can view my demo here: https://jsfiddle.net/yusril ...
I am interested in compiling Dart to JS for a non-web target, such as fermyon/js or node How can I compile Dart to JS for a non-web target? Update: I have been informed that it is possible, and although I couldn't find specific documentation, there ...
I am facing an issue with 2 scrolling divs (outlined in red) that refuse to scroll to the bottom. I cannot seem to pinpoint what needs to be adjusted to resolve this problem. The thick outlined box represents a simulated browser window. View the code her ...
Currently, I am coding a HTML document that includes an element with the attribute contenteditable set to true, but this element is wrapped inside a parent element with contenteditable set to false. The HTML structure looks like this: <div contentedita ...
Can anyone help me figure out how to merge two typescript definition packages, @types/package-a and @types/package-b, into one definition package? package-a.d.ts [export package-a {...}] package-b.d.ts [exports package-b {...}] package-mine.d.ts [ export ...
www.prismasites.com I am creating a unique world map by using SVG DIVs shaped like Continents. Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG. I have successfully achieved ...
My website is experiencing a challenge. Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds). Whe ...
I'm facing an issue with my PHP session. The login page is functioning correctly, but once I redirect to the home page, my login details are not being displayed. An error is being thrown: Notice : Undefined index: username in C:\xampp\htdocs ...
Although I am proficient in Python, I am struggling with JavaScript while trying to create an HTML page. I have a Python code snippet that I would like to replicate in JS. Can anyone provide some assistance? :) Here is my Python Code: import requests pos ...
I'm working on incorporating a JSON feed directly from a private spreadsheet (accessible only via link) onto my website. In order to do this, I must create a new auth token using OAuth 2.0, which is not an issue. However, the Google Sheets API v4 mand ...
I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...
I am trying to utilize the Google Chart API to create a line chart. I need to retrieve data through an AJAX method and then set this data to the chart using a JavaScript JSON array. However, I am encountering difficulties with the datetime format within th ...
Using Anddown to convert markdown to HTML and wanting to display it in a webview on a tablet screen, I encountered an issue. The webview, within a fragment, takes up half the screen in landscape mode. The challenge was getting the HTML content to appear a ...
let chart = am4core.create("chartdiv", am4charts.XYChart); chart.background.image = am4core.image("/static/img/bar-chart.png") I'm attempting to apply a background image to my chart in Amchart, but unfortunately it's not di ...
I've been encountering difficulties converting a multidimensional PHP Array to JSON. While using json_encode, the result is null. I'm working on developing an orgChart where the data is extracted from a CSV file and stored in an array. The layou ...
Hey there! I'm having trouble with this jQuery code that is supposed to fade in or fade out a div based on its contents. Here is the HTML code: <div class="mainContentWrapper"> sample text </div> And here is the CSS code: div.main ...
Attempting to manipulate data on a database using HTML buttons and encountering an issue when trying to insert data. The setup involves a Pug page called by Node Express, which generally functions well until the insertion process. Here is a snippet from th ...
I am looking to create a smooth animation effect for an HTML list that moves from left to right and vice versa with a fixed length. The issue I am encountering is that when I click on the right button, it is replacing the list elements instead of animating ...
/bower_components isn't functioning properly. An error code of 404 is appearing: GET /bower_components/jquery/jquery.js 404 My setup follows the instructions from Bower's documentation and also outlined in this source: app.use(express.static( ...