2016-12-28 2 views
0

Есть ли способ добавить кнопки в определенную часть диалогового окна jquery modal? Например, у меня есть стиль, который в настоящее время обусловлен тем, что кнопки находятся внутри div с определенным именем класса, есть ли способ настроить таргетинг на кнопки, чтобы войти внутрь этого div?Добавить кнопки внутри определенного div в диалоговом окне jquery ui

HTML:

<div id="dialog-confirm" title="Header"> 
<div class="modal-inner2"> 
    <div class="modal-header2"> 
    <h1>Header</h1> 
</div> 
<div class="modal-content"> 

    <p>I'm text</p> 

    <div class="BtnGoHere"></div> 

</div> 

JS:

$(function() { 
$("#dialog-confirm").dialog({ 
resizable: false, 
height: "auto", 
width: 400, 
modal: true, 
buttons: [ 
    { 
    text: "Cancel", 
    "class": "btn btn-cancel", 
    click: function() { 
     $(this).dialog("close"); 
    } 
    }, 
    { 
    text: "Save", 
    "class": "btn", 
    click: function() { 
     $(this).dialog("close"); 
    } 
    } 
] 
}); 
}); 
+0

http://stackoverflow.com/questions/6021107/can-i-dynamically-add-buttons-to-a-jquery-ui-dialog-box. Это должно помочь – xxCodexx

ответ

0

я играл вокруг вашего кода, и я думаю, что я нашел решение:

HTML:

<div id="dialog-confirm" title="Header"> 
<div class="modal-inner2"> 
    <div class="modal-header2"> 
    <h1>Header</h1> 
</div> 
<div class="modal-content"> 

    <p>I'm text</p> 

    <div class="BtnGoHere"></div> 

</div> 

Javascript:

$(function() { 
     $("#dialog-confirm").dialog({ 
     resizable: false, 
     height: "auto", 
     width: 400, 
     modal: true, 
     buttons: [ 
      { 
      text: "Cancel", 
      "class": "btn btn-cancel", 
      click: function() { 
       $(this).dialog("close"); 
      } 
      }, 
      { 
      text: "Save", 
      "class": "btn", 
      click: function() { 
       $(this).dialog("close"); 
      } 
      } 
     ] 
     }); 
    }); 

    $(".BtnGoHere").append("<input type='button' value='NewButton' />"); 

Как вы можете видеть, у вас есть только использовать метод на добавление от элемента, который вы хотите вставить новый. Также здесь у вас есть ссылка jsfiddle для проверки кода: https://jsfiddle.net/1yfu4w8o/

Надеюсь, это поможет!

0

Просто поместите кнопки внутри модального в HTML.
<div class="BtnGoHere"> <button class="btn" type="button">Close</button> <button class="btn" type="submit">Save</button> </div>