modal-slide.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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.innerScroll){ %><%- data.innerScrollClass %><% } %>"
  10. <% if(data.title){ %> aria-labelledby="modal-title-<%- data.id %>"<% } %>
  11. aria-describedby="modal-content-<%- data.id %>"
  12. data-role="modal"
  13. data-type="<%- data.type %>"
  14. tabindex="0">
  15. <div data-role="focusable-start" tabindex="0"></div>
  16. <div class="modal-inner-wrap"
  17. data-role="focusable-scope">
  18. <header class="modal-header">
  19. <% if(data.title || data.subTitle){ %>
  20. <h1 id="modal-title-<%- data.id %>" class="modal-title"
  21. data-role="title">
  22. <% if(data.title){ %>
  23. <%= data.title %>
  24. <% } %>
  25. <% if(data.subTitle){ %>
  26. <span class="modal-subtitle"
  27. data-role="subTitle">
  28. <%= data.subTitle %>
  29. </span>
  30. <% } %>
  31. </h1>
  32. <% } %>
  33. <button
  34. class="action-close"
  35. data-role="closeBtn"
  36. type="button">
  37. <span><%= data.closeText %></span>
  38. </button>
  39. <% if(data.buttons.length > 0){ %>
  40. <div class="page-main-actions">
  41. <div class="page-actions">
  42. <div class="page-actions-buttons">
  43. <% _.each(data.buttons, function(button) { %>
  44. <button
  45. class="<%- button.class %>"
  46. type="button"
  47. data-role="action"><span><%= button.text %></span>
  48. </button>
  49. <% }); %>
  50. </div>
  51. </div>
  52. </div>
  53. <% } %>
  54. </header>
  55. <div id="modal-content-<%- data.id %>" class="modal-content" data-role="content"></div>
  56. </div>
  57. <div data-role="focusable-end" tabindex="0"></div>
  58. </aside>