Include icons on modal buttons

Asked

Viewed 66 times

-1

Good afternoon, I am creating a modal that is already with all the perfect functionalities, but I need to include in the buttons the accept and cancel icons to leave more didactic for the user, but in jquery I do not know how to do this. The code I’m using to call the modal is this, I don’t know if there’s any other way to do this tbm.

$('#div_dialog_MostrarTexto').dialog({
    open: function(event, ui) {
        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
    },
    resizable: false,
    minHeight: 600,
    minWidth: 650,
    maxHeight: 600,
    modal: true,
    autoOpen: true,
    title: titulo,
    position: { my: 'top', at: 'top' },
    overflow: scroll,
    buttons: [
        {
            text: $('#doc_aceita_' + dadosDocumentos[idDocumento]).val(),
            disabled: false,
            image: "../img/confirmar.jpg",
            click: function() {
                aceitou(idDocumento);
            }
        },
        {
            text: $('#doc_recusa_' + dadosDocumentos[idDocumento]).val(),
            disabled: false,
            image: "../img/cancelar.jpg",
            click: function() {
                recusou(idDocumento);
            }
        },
    ]
});
  • 1

    You can create a button in HTML and customize the background with CSS, you wouldn’t need jquery.

1 answer

1


Why it does not work with jquery icons?

If it is with following icons, I will search for images.

$('#div_dialog_MostrarTexto').dialog({
    open: function(event, ui) {
        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
    },
    resizable: false,
    minHeight: 600,
    minWidth: 650,
    maxHeight: 600,
    modal: true,
    autoOpen: true,
    title: titulo,
    position: { my: 'top', at: 'top' },
    overflow: scroll,
    buttons: [
        {
            text: $('#doc_aceita_' + dadosDocumentos[idDocumento]).val(),
            disabled: false,
            icons: { primary: 'ui-icon-check' },
            click: function() {
                aceitou(idDocumento);
            }
        },
        {
            text: $('#doc_recusa_' + dadosDocumentos[idDocumento]).val(),
            disabled: false,
            icons: { primary: 'ui-icon-close' },
            click: function() {
                recusou(idDocumento);
            }
        },
    ]
});

  • I believe he needs a variety of bigger icons, with other colors and etc.

  • So work with fontawesome, make images is work... or create several icons, Compile and have customized.

  • Thank you very much, you solved my problem. In my case I would not need more icones no, the options will always be yes or no, but with the text of each different each time open, I thank the attention of both!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.