Is it possible to create an error or warning popup?

#1

I’ve created a popup function like so

function popup(title,message,buttontext = "Ok"){
  mobiscroll.alert({
      title: title,
      message: message,
      okText: buttontext
  });
}

Now how would I create a similar popup but with specific styling to indicate there’s an error.

I see that there are predefined themes that I can apply for iOS, windows, dark, light, etc. but there’s no “error” theme. I know you have a theme builder which is awesome but that’s overkill for what I need here.
I don’t want to build an entire theme for the whole system, I just want a popup that has a red banner or some other way to indicate it’s an error message. What’s the easiest way to accomplish that?

#2

Would a snackbar help?

image
image.png784×166 11.7 KB

You can add an action to it, or you can use a toast, that doesn’t have an action

image
image.png788×112 6.49 KB

Both support the danger, warning … color presets.

If you want a more complex alert, you could use the Sass variables, or change the theme variables on the fly. Can you share a mockup or screenshot about the outcome you’re looking for?

#3

I was thinking something similar to this:

error%201

That one’s based on a jQuery UI dialog, but I guess using the Mobiscroll popup I could do something similar:

error

Not sure I like the toast idea because this app will also run on desktop, not just mobile.

#4

Hi Vincent,

You could achieve something similar by injecting markup for the alert title:

mobiscroll.alert({
  title: '<div style="margin: -22px -22px 0 -22px;" class="mbsc-note mbsc-note-danger">Error</div>',
  message: 'The password is incorrect. Please try again',
  okText: 'Ok'
});
#5

Ah, cool. I didn’t realize I could include markup in there. That opens up a world of possibilities.
Thanks!