Very simple styling Alert and Confirm Box with css
I have the following simple code for a confirmation box
<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the hostname of the current URL.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Confirm!!!!");
}
</script>
</body>
</html>
but my problem is that I want the css to style OK and Cancel with a very simple way if anyone knows. I have a search on the internet and I find many solutions but not something real. Any idea?
source to share
alert
and confirm
are built in to execute JavaScript and STOP until they respond, allowing you to:
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm () solution you can customize in style cannot be included in a statement if
. If you only want the code to be executed when the button is clicked confirm
, then you need to make this code as a callback, which makes the above code look more like this:
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then you need to wire this function call to the "ok" button by clicking on the confirmation dialog. This means that it is inherently more complex in terms of coding, not to mention the code that has to connect it to the HTML form. I would say that you shouldn't reinvent the wheel and make your own modal. This means that you have to select jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for a solution they have for this, or use their modals.
source to share
This question has been asked in more detail:
Answer; you cannot erase the confirm () function dialog as it is common to the browser.
You will need to look for alternatives like these:
- jQuery Boxy : onehackoranother.com/projects/jquery/boxy/
- jQuery Dialog : jqueryui.com/dialog/#modal-confirmation
You can also try to create your own dialog box. It is not as easy as you asked. However, many tutorials can be found:
- Tutorial 1: www.developphp.com/view.php?tid=1385
- Tutorial 2: tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
(Sorry, as a newbie I'm not allowed to post more links)
source to share
As far as I know, you cannot change the style of the inline popups, but you can create your own with a bit of JavaScript trickery.
function promptWindow() {
// Create template
var box = document.createElement("div");
var cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.onclick = function() { document.body.removeChild(this.parentNode) }
var text = document.createTextNode("Please enter a message!");
var input = document.createElement("textarea");
box.appendChild(text);
box.appendChild(input);
box.appendChild(cancel);
// Style box
box.style.position = "absolute";
box.style.width = "400px";
box.style.height = "300px";
// Center box.
box.style.left = (window.innerWidth / 2) -100;
box.style.top = "100px";
// Append box to body
document.body.appendChild(box);
}
Once called promptWindow
, you have your own popup that you can style freely!
Hope it helped!
source to share