Is there any alert and confirm dialog available in jquery with custom title and custom content in it. I have searched many sites but cannot find appropriate. Any site link or any content are appreciable.
This question is related to
javascript
jquery
The answer is
I made custom messagebox using jquery UI component. Here is demo http://jsfiddle.net/eraj2587/Pm5Fr/14/
You have to pass just the parameters like caption name, message, button's text. You can specify trigger function on any button click. This will helpful for you.
Try using SweetAlert its just simply the best . You will get a lot of customization and flexibility.
Confirm Example
sweetAlert(
{
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
deleteIt()
);
Check the jsfiddle http://jsfiddle.net/CdwB9/3/ and click on delete
function yesnodialog(button1, button2, element){
var btns = {};
btns[button1] = function(){
element.parents('li').hide();
$(this).dialog("close");
};
btns[button2] = function(){
// Do nothing
$(this).dialog("close");
};
$("<div></div>").dialog({
autoOpen: true,
title: 'Condition',
modal:true,
buttons:btns
});
}
$('.delete').click(function(){
yesnodialog('Yes', 'No', $(this));
})
This should help you
You can use the dialog widget of JQuery UI
jQuery UI has it's own elements, but jQuery alone hasn't.
Working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
Source: Stackoverflow.com