javascript - Wait value in bootstrap confirm modal? - Stack Overflow

admin管理员组

文章数量:1297094

The question seems stupid, but I can't figure out how to wait the confirmation button for return a value. Javascript is based on single thread so I need to know how can I set something like a callback function until a button pression, this is the structure of the dialog:

<div class="modal fade" id="confirmation" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4>
            </div>
            <div class="modal-body">
                <label>Are you sure?</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-ok" data-dismiss="modal">Continue</button>
                <a class="btn btn-danger" data-dismiss="modal">Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<button id="go">press me</button>

and js:

$(document).ready(function()
{
    $('#go').click(function()
    {
        $('#confirmation').modal('show');
        //if the user has pressed the .btn-ok button then an alert appear
        alert(true);
    })
});

In practice when the user press the button a bootstrap dialog appear, I need to display an alert only if the user press the Continue button .bnt-ok, but actually I can't understood how to do this. Someone could show me how? Thanks.

JSFIDDLE

UPDATE

1 User fire an event and function one is executed:

one: function()
{
    if(two()) //if function two return true then show alert
    {
        alert(true);
    }
}

2 The function two show the bootstrap dialog:

 two: function()
 {
    $('#confirmation').show();

   //here I need to check if the user has pressed btn-ok, if yes,
   //I need to return true, otherwise false

   return true;
 }

3 The problem's e in the function two, 'cause there is no way to stop the function until the user button click. So the confirmation dialog is displayed but the function return true. How can I wait the user click?

The question seems stupid, but I can't figure out how to wait the confirmation button for return a value. Javascript is based on single thread so I need to know how can I set something like a callback function until a button pression, this is the structure of the dialog:

<div class="modal fade" id="confirmation" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4>
            </div>
            <div class="modal-body">
                <label>Are you sure?</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-ok" data-dismiss="modal">Continue</button>
                <a class="btn btn-danger" data-dismiss="modal">Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<button id="go">press me</button>

and js:

$(document).ready(function()
{
    $('#go').click(function()
    {
        $('#confirmation').modal('show');
        //if the user has pressed the .btn-ok button then an alert appear
        alert(true);
    })
});

In practice when the user press the button a bootstrap dialog appear, I need to display an alert only if the user press the Continue button .bnt-ok, but actually I can't understood how to do this. Someone could show me how? Thanks.

JSFIDDLE

UPDATE

1 User fire an event and function one is executed:

one: function()
{
    if(two()) //if function two return true then show alert
    {
        alert(true);
    }
}

2 The function two show the bootstrap dialog:

 two: function()
 {
    $('#confirmation').show();

   //here I need to check if the user has pressed btn-ok, if yes,
   //I need to return true, otherwise false

   return true;
 }

3 The problem's e in the function two, 'cause there is no way to stop the function until the user button click. So the confirmation dialog is displayed but the function return true. How can I wait the user click?

• javascript
• jquery
• twitter-bootstrap

Share Follow edited Jan 24, 2017 at 11:26 AgainMe asked Jan 23, 2017 at 21:23 AgainMeAgainMe 78055 gold badges1414 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Simply, attach a click handler to the .btn-ok element.

As such:

$('.btn-ok').click(function(){
   alert(true);
});

jsFiddle

EDIT:

Check out solution to your problem using ES6 promises.

const modal = new Promise(function(resolve, reject){
       $('#confirmation').modal('show');
       $('#confirmation .btn-ok').click(function(){
           resolve("user clicked");
       });
       $('#confirmation .btn-danger').click(function(){
           reject("user clicked cancel");
       });
      }).then(function(val){
        //val is your returned value. argument called with resolve.
        alert(val);
      }).catch(function(err){
        //user clicked cancel
        console.log("user clicked cancel", err)
      });

Updated jsFiddle. Note, that it is using ES6 promises, and you should check browser support or transpile your code (using babel for example).

I understand this problem well. Pure Typescript solution looks like this:

const result: boolean = confirm(message);
                if (result == true) {
                    return ConfirmationResult.ConfirmationResultPositive;
                } else {
                    return ConfirmationResult.ConfirmationResultNegative;
                }

where ConfirmationResult.ConfirmationResultPositive is some enum. The deal is confirm function shows standard js window and waits the user result (blocks further execution). Unfortunately bootstrap does not have this standard functionality. For example, WinForms, WPF and UMP (clear async) has the same standard behaviour. I also suppose that with Promise<> we can workaround it with bootstrap modal.

本文标签： javascriptWait value in bootstrap confirm modalStack Overflow