Modal dialog on top of editor


#1

I did not see modals in the styleguide, what’s the simplest way to stop a user from editing a file and display a dialog they have to interact with? Thanks!


#2

The only one that I can think of is the dialog that is displayed when you delete a file using the Tree View. You might want to check that out.


#3

Since Atom Uis are built on top of Bootstrap 3 you should be able to use bootstrap modals, but they probably won’t be styled by the Atom theme.


#4

Try atom.confirm.

atom.confirm
  message:"Error"
  detailedMessage:"This is a error dialog~"

#5

Is there a way to have a modal popup that doesn’t have such buttons? I’m running a relatively long (2-10 seconds) process on the whole text in the editor during which the user should not be able to edit the text. I haven’t found a way to disable the editor, I’m hoping a modal popup can do what I want.


#6

Not to my knowledge, but you do have control over what the buttons do. You can have your process set a “working” variable at the beginning and unset it when it completes, then open a dialog that says it’s working and may take several seconds. If the user clicks the button, the callback checks to see if that variable is set, and if the package is still working, the dialog returns.


#7

Here you go, test it carefully. :imp:

msg = document.createElement 'dialog'
msg.innerText = 'Hello There!'
document.body.appendChild(msg)
msg.showModal()