Skip to main content
Code Review

Return to Question

Notice removed Draw attention by Takit Isy
Bounty Ended with Sᴀᴍ Onᴇᴌᴀ's answer chosen by Takit Isy
Correction
Source Link

I ended up with that: I've created 2multiple functions (dialog_OkCancel and, dialog_Input_OkCancel, dialog_YesNoCancel) that call the same "main" dialog_handler.
That way I avoid calling the big main function and use only the little and easier ones.

I ended up with that: I've created 2 functions (dialog_OkCancel and dialog_Input_OkCancel) that call the same "main" dialog_handler.
That way I avoid calling the big main function and use only the little and easier ones.

I ended up with that: I've created multiple functions (dialog_OkCancel, dialog_Input_OkCancel, dialog_YesNoCancel) that call the same "main" dialog_handler.
That way I avoid calling the big main function and use only the little and easier ones.

Rollback to Revision 7
Source Link 
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": function() {
 funk_Yes();
 $(this).dialog("close");
 },
 "No": function() {
 funk_No();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
.dialog {
 display: block;
 margin: 8px;
 text-align: center;
 width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog Ok;'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog;'>Dialog<br>Input</button>
 Input< <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
</body>
</html>
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog Ok/Cancel</button>
 <button onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog Input</button>
</body>
</html>
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": function() {
 funk_Yes();
 $(this).dialog("close");
 },
 "No": function() {
 funk_No();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
.dialog {
 display: block;
 margin: 8px;
 text-align: center;
 width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
  <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
</body>
</html>
Rollback to Revision 6
Source Link 
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": function() {
 funk_Yes();
 $(this).dialog("close");
 },
 "No": function() {
 funk_No();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
.dialog {
 display: block;
 margin: 8px;
 text-align: center;
 width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok;'>Dialog Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
  });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
  funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 ;'>Dialog });'>Dialog<br>Yes/No/Cancel<Input</button>
</body>
</html>
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": function() {
 funk_Yes();
 $(this).dialog("close");
 },
 "No": function() {
 funk_No();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
.dialog {
 display: block;
 margin: 8px;
 text-align: center;
 width: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
  });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
  funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
  });'>Dialog<br>Yes/No/Cancel</button>
</body>
</html>
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": function() {
 funk_Ok();
 $(this).dialog("close");
 },
 "Cancel": function() {
 $(this).dialog("close");
 }
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<html>
<body>
 <button onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog Ok/Cancel</button>
 <button onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog Input</button>
</body>
</html>
Added another dialog function
Source Link
Loading
update grammar, tags
Source Link
Loading
Tweeted twitter.com/StackCodeReview/status/974645019616448512
Notice added Draw attention by Takit Isy
Bounty Started worth 50 reputation by Takit Isy
edited title, removed thanks
Source Link
t3chb0t
  • 44.6k
  • 9
  • 84
  • 190
Loading
deleted 94 characters in body
Source Link
Loading
deleted 94 characters in body
Source Link
Loading
added 16 characters in body
Source Link
Loading
Source Link
Loading
default

AltStyle によって変換されたページ (->オリジナル) /