modal-popup.html 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  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 %>"
  42. class="modal-content"
  43. data-role="content"></div>
  44. <% if(data.buttons.length > 0){ %>
  45. <footer class="modal-footer">
  46. <% _.each(data.buttons, function(button) { %>
  47. <button
  48. class="<%- button.class %>"
  49. type="button"
  50. data-role="action"><span><%= button.text %></span></button>
  51. <% }); %>
  52. </footer>
  53. <% } %>
  54. </div>
  55. <div data-role="focusable-end" tabindex="0"></div>
  56. </aside>