modal-custom.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!--
  2. /**
  3. * Copyright © Magento, Inc. All rights reserved.
  4. * See COPYING.txt for license details.
  5. */
  6. -->
  7. <aside role="dialog"
  8. class="modal-<%- data.type %> <%- data.modalClass %>
  9. <% if(data.responsive){ %><%- data.responsiveClass %><% } %>
  10. <% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
  11. <% if(data.title){ %> aria-labelledby="modal-title-<%- data.id %>"<% } %>
  12. aria-describedby="modal-content-<%- data.id %>"
  13. data-role="modal"
  14. data-type="<%- data.type %>"
  15. tabindex="0">
  16. <div data-role="focusable-start" tabindex="0"></div>
  17. <div class="modal-inner-wrap"
  18. data-role="focusable-scope">
  19. <header class="modal-header">
  20. <% if(data.title || data.subTitle){ %>
  21. <h1 id="modal-title-<%- data.id %>" class="modal-title"
  22. data-role="title">
  23. <% if(data.title){ %>
  24. <%= data.title %>
  25. <% } %>
  26. <% if(data.subTitle){ %>
  27. <span class="modal-subtitle"
  28. data-role="subtitle">
  29. <%= data.subTitle %>
  30. </span>
  31. <% } %>
  32. </h1>
  33. <% } %>
  34. <button
  35. class="action-close"
  36. data-role="closeBtn"
  37. type="button">
  38. <span><%= data.closeText %></span>
  39. </button>
  40. </header>
  41. <div id="modal-content-<%- data.id %>" class="modal-content" data-role="content"></div>
  42. <% if(data.buttons.length > 0){ %>
  43. <footer class="modal-footer">
  44. <% _.each(data.buttons, function(button) { %>
  45. <button class="<%- button.class %>"
  46. type="button"
  47. data-role="action">
  48. <span><%= button.text %></span>
  49. </button>
  50. <% }); %>
  51. </footer>
  52. <% } %>
  53. </div>
  54. <div data-role="focusable-end" tabindex="0"></div>
  55. </aside>