Как я могу заставить Reveal Modal работать в Foundation 6?

Я не уверен, почему этот базовый модальный режим не работает... что мне не хватает?

<!DOCTYPE HTML>

<html>

  <head>

    <title>index</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="description" />

    <meta name="author">

    <!-- Style Sheets -->

    <link rel="stylesheet" href="css/foundation.min.css" />

    <link rel="stylesheet" href="css/normalize.css" />

    <link rel="stylesheet" href="css/styles.css" />

    <!-- HTML% shiv -->

    <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

  </head>


  <body>

    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

    <div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

      <h2 id="modalTitle">Lorem Ipsum</h2>

      <p class="lead">Lorem ipsum lorem.</p>

      <p>Lorem ipsum lorem ipsum lorem ipsum.</p>

      <a class="close-reveal-modal" aria-label="Close">&#215;</a>

    </div>



    <script src="js/vendor/jquery.js"></script>

    <script src="js/foundation/foundation.min.js"></script>

    <script src="js/vendor/fastclick.js"></script>

    <script src="js/vendor/modernizr.js"></script>

    <script>
      $(document).foundation();

    </script>


  </body>

</html>

И вот файлы:

Файлы в папке


zurb-foundation zurb-foundation-6
person sanlorena    schedule 13.04.2016    source источник
comment
Можете ли вы хорошо отформатировать свой код, пожалуйста. Вы добавили базовый сценарий JS?   -  person general03    schedule 13.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

Ваш якорь должен иметь атрибут data-open="myModal" или data-toggle="myModal". Ваша кнопка закрытия также должна быть data-close.

person EddieDean    schedule 13.04.2016

arrow_upward
1
arrow_downward

Похоже, вы используете раскрытие Foundation 5, оно изменилось для Foundation 6.

Я переформатировал ваш кодовый блок раскрытия ниже, добавив data-open к вашей открытой привязке и data-close к кнопке закрытия, а блок раскрытия имеет class="reveal":

        <a href="#" data-open="myModal">Click Me For A Modal</a>

        <div id="myModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
            <h2 id="modalTitle">Lorem Ipsum</h2>

            <a class="close-button" data-close aria-label="Close">&#215;</a>
        </div>

Zurb Foundation 6 Reveal: http://foundation.zurb.com/sites/docs/reveal.html

person Chris O    schedule 14.04.2016