Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS?

function myFunction() {
alert("Record Save");
}

Thank you in advance!

Answer №1

When it comes to customizing a javascript alert, you're out of luck as it is completely controlled by the browser. However, there is a solution - create your own function for alerts.

Here's an example:

// Styling with CSS
.myAlert {
    position: fixed;
    width: 6cm;
    height: 6cm;
    top: calc(50% - 3cm);
    left: calc(50% - 3 cm);
    display: none;
}
.active {
    display: block;
}
// Function using Javascript and jQuery
function myAlert() {
    $('#myAlertBox').toggleClass('active');
}
// HTML Structure
<div id="myAlertBox">Hello!</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

JavaScript - turn off online connectivity

Is there a way to test my website for offline use by disabling connectivity on the bootstrap before anything loads, so that all data will be loaded from cache? I have tried various offline libraries such as this one, but I haven't found a way to prog ...

How can one gain access to a specifically generated element?

In my task of dynamically generating multiple elements, I am facing an issue related to accessing specific ones. To illustrate this problem as simply as possible, I have provided the following code: $(document).ready(function() { var num1 = 0; v ...

Angular neglects the specified animation timing

I created a sidebar component that relies on the sidebarExpanded state passed through Input(). Despite the correct animation trigger upon input change, the width adjustment happens abruptly. Interestingly, the same animation code works flawlessly in anothe ...

What could this error be in Chrome console: "Uncaught SyntaxError: Unexpected token ':'"

Why am I getting this error in the Chrome console: "Uncaught SyntaxError: Unexpected token ':'"? I have a JSON file located at the root of my application: <script src="levels.json"></script> Here is the content of my JSON file: { ...

Having difficulty accessing the sound file despite inputting the correct path. Attempts to open it using ./ , ../ , and ../../ were unsuccessful

While attempting to create a blackjack game, I encountered an issue. When I click the hit button, a king card picture should appear along with a sound. However, the sound does not play and the error message Failed to load resource: net::ERR_FILE_NOT_FOUND ...

Exploring the method of retrieving nested JSON objects in Angular

When my API sends back a JSON response, my Angular application is able to capture it using an Interface. The structure of the JSON response appears as follows: { "release_date":"2012-03-14", "genre_relation": ...

Using JavaScript with Selenium, you can easily clear the input field and send

Here is a question input field. When clicked on, the h3 element with the name will disappear and the input tag will appear for entry of a new name. <td style="width:92%;"> <h3 id="question_tex ...

What is the best way to implement this header style with code?

I came across this design from a potential client recently, even though we didn't end up working together. I thought it would be a good exercise to try coding the design for practice purposes. Just to clarify, this is not my original design and I have ...

Retrieve the Content-Type header response from the XHR request

My intention is to check the header content type and see if it is text/html or text/xml. If it is text/html, then it indicates an error that I need to address before moving forward. ...

Troubleshooting: Vue.js not triggering method after watching object

I am in need of watching a prop that is an object, so here is my script: <script> export default { watch:{ filter: { handler:(newval)=> { console.log("I have new data",newval) //this works thi ...

How to prevent the parent element from scrolling when changing the value of a number input by scrolling

Within a container with fixed dimensions and scroll bars that appear when the content size exceeds the container, there is a form. This form contains an input of type "number" which allows changing its value using the mouse wheel. The issue arises when at ...

Using Filters in VueJs

I am currently working on creating a small Vue.js 2.0 application where I am utilizing the v-select component from here. The data format that I am dealing with looks something like this: { "model": [ { "id":1, ...

Copy values of multiple input fields to clipboard on click

I have a collection of buttons in my Library, each with different text that I want to copy when clicked function copyTextToClipboard(id) { var textElement = document.getElementById(id); textElement.select(); navigator.clipboard.writeText(textElement. ...

npm encountered an error or issue during the installation process

I have configured my proxy settings in the .npmrc file, but I am encountering errors when running the npm install command: $ npm install npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program File ...

The button component in my React application is not functioning as expected, despite utilizing the useState and useEffect hooks

I'm having trouble with my Button not working, even though I am using useState and useEffect Check out the code below: import React, { useState, useEffect } from "react"; // import Timeout from "await-timeout"; import ...

The checkbox will be automatically checked whenever there is any modification in the textbox

I'm currently working on a Grid view with a checkbox and two textboxes. What I want is for the checkbox to be automatically checked whenever there is a change in one of the textbox values, for example switching from 0 to 1. This project is being devel ...

Utilizing shared code amongst React components

There are several components with methods similar to the ones below: class Header extends Component { sidebarToggle(e) { e.preventDefault(); document.body.classList.toggle('sidebar-hidden'); } sidebarMinimize(e) { e.preventDe ...

Issues with undesirable spacing in CSS using the display property and table-cell display type

Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

Aligning content with CSS styling

I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed parag ...