ダイアログボックスのボタンのカスタム配置 - jquery ui

Question

ダイアログボックスに追加されたボタンを上または左に移動したいのですが、どうすればこのことができますか？jquery UIを使用しています。 OKを追加すると極端な右端に表示されますが、これを周囲に置くことはできますか？これは、のマークアップで

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none; 
} 

.ui-dialog .ui-dialog-buttonpane { 
    text-align: center; /* left/center/right */ 
} 

DEMO

---

を：、中央/右詰め/左のボタンを配置し、フローティングを無効にし、それに応じてtext-alignプロパティを調整するには

$(function() { 
$("#dialog-message").dialog({ 
    modal : true, 
    resizable : false, 
    buttons : { 
     ok:function() { 
      $(this).dialog("close"); 
     } 
    } 

    }); 
}); 

Answer 1

ボタン：

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <div class="ui-dialog-buttonset"> 
     <!-- the buttons are here --> 
    </div> 
</div> 

デフォルトのCSSを指定：要素の

• text-align: left;.ui-dialog-buttonpane
• float:right要素.ui-dialog-buttonset

Answer 2

のために上記の答えは素晴らしいですが、それはすべてのボタンに適用されます。以下の例は、各ボタンを個別に配置できるモーダルダイアログで、個別にスタイルを設定することもできます。

 $("#divModelPopup").dialog({ 
      closeOnEscape: false, 
      width: 500, 
      minWidth: 500, 
      minHeight: 400, 
      modal: true, 
      open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, 
      title: "Terms & Conditions", 
      buttons: { 
       "I Decline": { 
        click: function() { 
         $(".lnkLogout").click(); 
        }, 
        text: "I Decline", 
        class: "btnDlgDecline" 
       }, 
       "I Accept": { 
        click: function() { 
         $(this).dialog("close"); 
         // Update user details as accepted 
         $.ajax({ 
         .... Ajax call 
         }); 
        }, 
        text: "I Accept", 
        class: "btnDlgAccept" 
       }, 
       "Print": function() { 
        $("#divModelPopupPrintArea").printArea(options); 
       } 
      }, 
      resize: function (event, ui) { 
       $("#divModelPopupScroll").height(ui.size.height/1.27); 
      } 
     }); 

そしてCSSで、

.btnDlgDecline{ 
    position: absolute; 
    left: 10px; 
    color: red !important; 
} 

.btnDlgAccept{ 
    color: green !important; 
} 

はそれがお役に立てば幸いです。

Answer 3

ボタンのタグ内のボタンのスタイルを変更することができます。

    Ok:{         
          style:"margin-right:640px",        
          click: function() { 
           //do something 
          } 
         }, 

このスタイルは複数のダイアログでも機能します.Good Luck。

Answer 4

次の3つのボタンがあり、それらがライン上にうまく分散されていることをしたい場合は、試してみてください。誰かが重要が重要

お楽しみください、

で、前にも言ったよう

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none; 
} 

.ui-dialog .ui-dialog-buttonpane { 
    text-align: center; /* left/center/right */ 

} 
.ui-button { 
    margin-left: 5% !important; 
    margin-right: 5% !important; 
} 

は、気をつけて