Как открыть новый модал БЕЗ закрытия текущего модального - PullRequest
Новая
       5

Как открыть новый модал БЕЗ закрытия текущего модального

0 голосов
/ 20 сентября 2018

Можно ли открыть модал, который не закроет текущий модал?

У меня есть этот код, который я получаю на этой странице. 

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <style type="text/css">
    .bs-example {
      <!--from ww w .j a v a 2s .co m-->margin: 20px;
    }
  </style>
</head>

<body>
  <div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch
          Demo Modal</a>
    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Confirmation</h4>
          </div>
          <div class="modal-body">
            <label>ID</label> <input type="text"><br><br>
            <input type="button" value="Take Photo">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Что я хочу сделать, так это то, что когда я нажимаю кнопку «Сфотографировать» внутри модала, он открывает новый модал, который не закрывает другой модал или текущий модалБольшое спасибо ..

1 Ответ

0 голосов
/ 20 сентября 2018

Хотите что-то подобное?

https://codepen.io/Sachin4dotnet/pen/KxJQMX

HTML: 

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 1</h4>
      </div>

      <div class="modal-body">
        <form role="form" action='#' method="post">
       <input type="text" class="form-control" placeholder="Username">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="signin">Sign In Now</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

  <!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="myModalLabel">Modal 2</h4>
      </div>

      <div class="modal-body">
        <p>Sign In Error</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </form>
    </div>
  </div>
</div>

Javascript: 

//trigger next modal
$("#signin").on( "click", function() {
        $('#myModal2').modal('show');  
});

Есть еще одинодин вариант, который лучше, но имеет больше JS / CSS - https://codepen.io/maouida/pen/NPGaaN

...