A JavaScript popup displaying selectable options and a callback function

Is there a feature in Javascript that is similar to Java's alert builder? I need a button that, when clicked, will display an alert with various options. When an option is selected, it should trigger a callback function passing the chosen option along.

Alternatively, will I need to incorporate a Java call in my code to handle the response?

Answer №1

Here's a straightforward way to create a confirm dialog:

JavaScript

if(confirm("Are you sure you want to proceed?")) 
{ 
   console.log("Go ahead");
}

If this doesn't suit your needs, consider using jQueryUI for more advanced modal dialogs.

Answer №2

For a solution that handles prompts with callbacks, visit .

If you need more than just a basic confirmation with a yes or no option, utilizing a library or creating your own plugin is necessary.

Answer №3

If you're looking for a solution, check out this convenient jsfiddle created by the user StriplingWarrior. It utilizes the jquery UI dialog plugin to allow for multiple inputs and easy handling of input events at the time of declaration.

buttons: {
   "Yes": function() {
      alert('you chose yes');
   },
   "No": function() {
      alert('you chose no');
   },
   "Cancel": function() {
      dialog.dialog('close');
   }
}

For more information on a similar topic, visit this question on stackoverflow.

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

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

Rotational transformation in CSS not displaying in Webkit / iPhone browsers, yet functioning properly in Chrome Devtools device toolbar

tl;dr: My CSS transform rotate is not rendering on Webkit / iPhone, but it works in Chrome Devtools device toolbar. Update: I've also opened a separate GitHub issue that is more concise and easier to read, without code excerpts, here. Giving some co ...

Unable to perform updates for personalized fonts

I've been trying to incorporate custom fonts into my website, but I seem to be facing difficulties in actually implementing them. Could someone please let me know if I am doing it correctly? .pattern{ background:rgba(0,0,0,.5) url(../images/pattern ...

What is the best way to create a menu that can be hovered over but not clicked on

This HTML code includes a dropdown menu created using Bootstrap. It contains navigation links for Home, Add User, Export, and Logout. <ul class="nav navbar-nav navbar-right"> <li <?php if($tabs=='home' or $tabs=='') ech ...

Running a JQuery function that triggers on page load to execute inline JavaScript specifically on select elements

In my form, there are 3 select drop-down menus that are dynamically populated based on previous selections using jQuery and Ajax. Everything works perfectly when filling out a new form entry and using the onchange event handler. Now, I need to display exi ...

Arrange objects on a grid

I've got an array filled with objects, each containing 3 images, a name, and some details. I'm attempting to display these objects on Bootstrap cards, but currently each card is showing up on its own line. My goal is to arrange the cards in a gri ...

List of models loaded in Three.js

Within this block of code, my goal is to load multiple 3D models using the asynchronous .load method. async function loadModels(lights, roomWidth, roomHeight) { // Initializing an empty array to store the loaded models models = [] /* Lo ...

Node.js seems to be playing tricks on me. It's creating bizarre names and tweets by utilizing arrays

Trying to decipher a snippet of code that is tasked with generating random tweets has left me puzzled. Specifically, I find myself stumped when it comes to understanding the line: Math.floor(Math.random() * arr.length) I believe this line selects a rando ...

A guide to reordering table rows by drag-and-drop with JavaScript

Seeking assistance with swapping table rows using JQuery UI. Although successful in the swap, struggling to retrieve row numbers during the drag and drop event. Understanding the row number is essential for subsequent tasks. Any help would be greatly appre ...

What is the best way to dynamically duplicate the Bootstrap multi-select feature?

$(function() { $('#days').multiselect({ includeSelectAllOption: true }); $('#btnSelected').click(function() { var selected = $("#days option:selected"); var message = ""; selected.each(function() { message ...

CSS Attribute Selector Wildcard Capture Tool

Suppose I have the following HTML structure: <div class="tocolor-red"> tocolor </div> <div class="tocolor-blue"> tocolor </div> <div class="tocolor-green"> tocolor </div> <div class="tocolor-yellow"> tocolor ...

List of EMF elements

Within my model, there is an interface named Result that is implemented by multiple classes. I am now looking to include Lists of results as Results. Ideally, I would like to create something like: List < ResultImplA > This List: should only cont ...

What causes the malfunction of the save function in express?

Today marks my first venture into using Express. I attempted to create a straightforward route, but unfortunately, my save function is not cooperating. Despite scouring similar inquiries on stackoverflow, I have been unable to find a solution. Any assistan ...

activate a CSS-only modal with JavaScript

Is it possible to trigger a pure CSS modal using JavaScript (jQuery) without the need for a label, so that it activates when a user visits a page? http://jsfiddle.net/h84nubzt/ <label class="btn" for="modal-one">Example</a> <!-- Modal ...

Is it possible to generate multiple services from a single factory in Angular?

Recently, I developed a service called tableService using the following code: app.factory('tableService', [function() { var data = some data; var foo = function (){ //do something to data here }; return { data: data, ...

Utilize unshift() method in JavaScript to insert form input into an array

I'm having trouble with adding elements to an array using a form and the unshift() method. The code snippet provided below isn't functioning as expected, and I need help understanding why. <form> <input id="input"></input> < ...

Dealing with errors in React by utilizing the setState function

Encountering an issue while trying to update the state of a single component. A warning message states: Each child in an array or iterator should have a unique "key" prop. The list was created within the state. The intention is to update the list upon c ...

Sharing information between sibling modules

Currently, I am faced with the challenge of transmitting data between two sibling components within the following component structure. The goal is to pass data without changing the relationships between these components. I prefer not to alter the componen ...

The values obtained from the previous parameter object of the React setState hook can vary and are not always

In my code, I am using a useEffect hook to update the state with setState. However, I'm encountering some unusual and inconsistent behavior with the previous parameter: useEffect(() => { setCurrentPicturesObject((existing) => { ...

Tips on removing either the date or time when input type date and input type time share the same ng-model

In my Ionic app built with AngularJS, I have a form where the date and time are displayed separately but share the same data-ng-model: <input type="date" id ="actualVisitDate" data-ng-model="actualVisitDate" required> <input type="time" id ="actu ...