Dojo Button is not center align, when it is inside dialog
in the below code, I have created a button inside the dialog box, but button is not center aligned, how to make it as center aligned?
var alert_dialog= new dijit.Di开发者_开发技巧alog({
id: "mydialog,
title: "My Alert",
content: "Hai"
}, this.name);
alert_dialog.set("class","claro");
//-----------------------------------------------------------------
//---------------- Button Creation Start --------------------------
//-----------------------------------------------------------------
var button = new dijit.form.Button({
id: "Alert_Button_"+this.name,
label: "Close"
});
button.set("class", "claro");
dojo.connect(button, "onClick", function(){
alert_dialog.destroy();
});
alert_dialog.domNode.appendChild(button.domNode);
//alert_dialog.containerNode.appendChild(button.domNode);
//-----------------------------------------------------------------
//---------------- Button Creation End --------------------------
//-----------------------------------------------------------------
dijit.byId(alert_dialog.id).show();
alert_dialog._setStyleAttr('border : 1.5px solid #000000');
alert_dialog._setStyleAttr('background : #FFFFFF');
I'm sure there many are many other good ways to do this, but this worked well when I tested it.
var node, button;
node = dojo.create("div", {style: "margin: 0px auto 0px auto; text-align: center;"}, alert_dialog.domNode);
button = new dijit.form.Button({
label: "Close",
'class': "claro",
onClick: alert_dialog.destroy
}).placeAt(node);
also placing your class and onClick into the declaration of the button is a little cleaner looking and saves you some typing. you could also do the same with style and class for the dialog.
This is a dojo AMD solution, I hope can help the discussion. It is a function that show an alert dialog with HTML content and a "Close" centered button.
require([
"dojo/dom-construct",
"dijit/Dialog",
"dijit/form/Button",
], function(domConstruct, Dialog, Button){
function showAlertDialog(htmlmsg, title) {
if(!title) title = "Alert";
var saddlg = new Dialog({title: title, style: "width: 300px;"});
saddlg.set('content', htmlmsg);
var saddiv = domConstruct.create("div", { style: "text-align: center; background: white;" }, saddlg.domNode);
var sadbtn = new Button({ label: "Close",
onClick: function(){
saddlg.hide();
domConstruct.destroy(saddlg);
}
});
sadbtn.placeAt(saddiv);
saddlg.show();
}
});
精彩评论