How to implement a custom 'confirm' prompt in JS using promises

Question

This is the base code

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    if (confirm("Add with a flag?") == true) {
      flag = true
    } else {
      flag = false
    }
  } 
  addItem(flag)
})

What I want to do though, is build a robust modal containing specific instructions about how to answer the 'Add with a flag?' question being posed. Within the modal, there will be 2 button elements for 'Yes' vs 'No'. So think of this as a basic modal (using Bootstrap):

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="flag_modal" aria-hidden="true" id="flag_modal">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title serif text-center">
            Add with a flag?
          </h2>
        </div>
        <div class="modal-body">
          <!-- detailed instructions -->
          <button id="yes" class="btn btn-lg">Yes</button>
          <button id="no" class="btn btn-lg">No</button>
        </div>
      </div>
    </div>
</div>

Like the default confirm alert, the UX is that when add-item is clicked, if the not-included logic calculates that ask_about_flag is true, this modal pops up, and the code doesn't proceed to call addItem until user selects either #yes or #no to set the value of the flag.

However, it's also possible that upon add-item click, the not-included logic calculates that ask_about_flag is false, so the modal doesn't show and addItem is called (flag = null in this case).

Because of this, I think it makes sense for code organizing to keep addItem function call within the add-item click, rather than push it down into the button handlers (to be clear code below would work)

$(".add-item").click(function() {
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    $("#flag_modal").show()
  } 
  addItem()
})

$("#yes").click(function() {
  addItem(true)
})

$("#no").click(function() {
  addItem(false)
})

I want to do something instead like:

$(".add-item").click(function() {
  var flag;
  var ask_about_flag = // some logic ... 
  if (ask_about_flag == true) {
    // pop up modal to ask user to set value of flag
  } 
  // wait to execute until value of flag is set, if needed
  addItem(flag)
})

Seems like Promises are the way (let me know if not!), but that's still pretty new to me, so I took a stab with the below. Working up until when I click a yes or no button where I get Uncaught TypeError: promise.resolve is not a function

var promise; // declare so that it's available both from within `add-item` and `button` handlers

$(".add-item").click(function() {
  promise = new Promise(function(resolve, reject) { 
    var ask_about_flag = // some logic ... 
    if (ask_about_flag == true) {
      $("#flag_modal").modal("show")
    } else {
      resolve(null)
    }
  })

  promise.then(function(flag) {
    // flag is the parameter passed to resolve
    addItem(flag)
  })
})

$("#yes").click(function() {
  promise.resolve(true)
})

$("#no").click(function() {
  promise.resolve(false)
})

FIDDLE: https://jsfiddle.net/0g76ce5s/