How to add my custom buttons with ids to a dialog-modal jquery object

问题

I would like to add custom buttons (with ids, so they can be clicked and have an action happen), added to my dialog modal object.

I would like there to be some text, and then have the buttons below the text in the modal dialog box.

Right now I have:

Javascript:

$("#dialog-modal").dialog({
    autoOpen: false,
    resizable: false,
    draggable: false,
    height: 250,
    width: 500,
    modal: true,
    dialogCLass: 'main-dialog-class'
});

$("#dialog-modal").dialog("open");

var text = '';
text = "This is a test";

$('#dialog-modal').text(text);

HTML:

<div id="dialog-modal" title="{{$artist->stage_name}} in {{Auth::user()->city}}!"></div>

I would like to add a button that looks like:

<a class="facebook-button" id="facebook" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Share on Facebook</a>

Thank you for your help.

回答1:

use .html() to add html contents like button or a tags etc to div

you can use to you a tag like this :-

$('#dialog-modal').html('<a class="facebook-button" id="facebook" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Share on Facebook</a>');

回答2:

You can use buttons option to add custom buttons on your dialog:

add the option like this:

    $( "#dialog-modal" ).dialog({ 
        buttons: [{ text: "Share on Facebook",
                click: function() {
                    // your function here
                }
        }]
    });

来源：https://stackoverflow.com/questions/17849513/how-to-add-my-custom-buttons-with-ids-to-a-dialog-modal-jquery-object