A very simple Alert and Confirm Box style with css
Question
I have the follow simple code for a confirm 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 I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.
3 answers
solution1
5 2014-11-16 21:29:21
This question has been asked more:
Answer; you can NOT style the confirm() function it's dialog box since it's browser generic.
You will have to search for alternatives like these:
- jQuery Boxy : onehackoranother.com/projects/jquery/boxy/
- jQuery Dialog : jqueryui.com/dialog/#modal-confirmation
You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of 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 beginner I'm not allowed to place more links)
solution2
3 ACCPTED 2014-11-16 21:18:48
alert and confirm are built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm() solution that you work-up that can be styled won't be able to be included in an if statement. If you want code to only execute when the confirm is clicked, then you need to make that code as a callback, which make the above code look more like this:
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.
solution3
2 2014-11-16 21:19:11
As far as I know, you can't change the style of native pop up windows, 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);
}
After calling promptWindow you have your own pop up box, which you are free to style!
Hope this helped!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.