0

Вообщем проблема какая? у меня несколько кнопок и нужно, что бы при нажатии на каждую открывались разные мод. окна. Я сделал две кнопки и под каждой вставил js для модального окна. Изменил классы и идентификаторы соответственно. Проверяю и получается, что обе кнопки вызывают одно и то же окно.

<!-----------------------------------------ПЕРВАЯ КНОПКА-------------------------------------------------------->
<div>
  <!-- Trigger/Open The Modal -->
  <button id="my1" class="m">
    <p id="c">Название компании</p>
    <img src="img/set.png" width="20px">
  </button>

  <!-- The Modal -->
  <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
      <span class="close">?</span>
      <p>
        <input type="text" class="n" placeholder="Введите название компании">
      </p>
    </div>

  </div>

  <script>
    // Get the modal
    var modal = document.getElementById('myModal');

     // 1
    var btn = document.getElementById("my1");

     // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

     // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
    }

     // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

     // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>



  <!--<div><form action="#" name="formtext" enctype="text/plain" method="get" class="bodyform">
                        <div class="inputik"><input type="text"></div>
                        <input type="text">
                        <input type="text">
                        <input type="text">
                             </form></div>-->

  <script>
    $(document).ready(function() {

      $(".n").keyup(function() {
        $('#c').text($(".n").val());
      });

    });



    /*<!--Кнопка-->
                                $(document).ready(function(){
                                $('.m').click(function(){
                                    $(this).toggleClass('on');
                                });
                            });*/
  </script>
</div>
<!-----------------------------------------ВТОРАЯ КНОПКА-------------------------------------------------------->
<button id="q" class="w">
  <p id="e">Мои карты</p>
  <img src="img/set.png" width="20px">
</button>
<div id="r" class="t">
  <div class="y">
    <span class="close">?</span>
    <p>
      <input type="text" class="u" placeholder="Мои карты">
    </p>
  </div>
  <script>
    // Get the modal
    var modal = document.getElementById('r');

     // 1
    var btn = document.getElementById("q");

     // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

     // When the user clicks the button, open the modal 
    btn.onclick = function() {
      modal.style.display = "block";
    }

     // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
      modal.style.display = "none";
    }

     // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  </script>
  <script>
    $(document).ready(function() {

      $(".u").keyup(function() {
        $('#e').text($(".u").val());
      });

    });



    /*<!--Кнопка-->
                                $(document).ready(function(){
                                $('.m').click(function(){
                                    $(this).toggleClass('on');
                                });
                            });*/
  </script>

</div>
2
  • в глобальной области видимости переопределяются переменные modal и btn
    – user176262
    9 дек 2016 в 5:17
  • и span (7 символов нужно...)
    – user176262
    9 дек 2016 в 5:23

2 ответа 2

1

Вам нужно не изменять содержимое в modal, а создавать новое окно. Обращение у вас идёт к одному элементу.

$(function() {
  $('[data-open-modal]').click(function() {
    var modal = $(this).attr('data-open-modal'),
        code = '<div class="modal" id="modal_'+modal+'"><h1>'+$('noscript[name="'+modal+'"]').data('title')+'</h1><button data-close>Закрыть</button><div class="contant">'+$('noscript[name="'+modal+'"]').html()+'</div></div>';
    $('body').append(code);
    $('.modal [data-close]').click(function() {
      $(this).parents('.modal').remove();
    });
  });
});
.modal {
  display:block;
  position:absolute;
  top:20px;
  left: calc(50% - 100px);
  background: white;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-open-modal="modal1">Кнопочка 1</button>
<button data-open-modal="modal2">Кнопочка 2</button>
<noscript name="modal1" data-title="Заголовок 1">
  Текст - ля ля ля
</noscript>
<noscript name="modal2" data-title="Заголовок 2">
  А тут другой текст
</noscript>

2
  • спасибо. Это понял. А как стилизовать эти окна? Сам понимаю, что вопрос очень тупой, но javascript я не знаю вообще, а сделать надо. 9 дек 2016 в 14:35
  • 1
    @димаовчаров, в смысле стилизовать? Что бы они были по центру экрана и имели какой-то вид? Если да, то я там в code пишу какой элемент и с чем он должен создаваться (указываю class, id). И по class, id элементов в css стилях присваиваю свои значения
    – Yuri
    9 дек 2016 в 14:52
0

Клонировать перед заполнением

// Get the modal
var modal = document.getElementById('myModal').clone();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.