Я хочу вывести два больших модала, которые делят экран на два - PullRequest
Новая
       3

Я хочу вывести два больших модала, которые делят экран на два

0 голосов
/ 21 мая 2019

текущий модал это al

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

Например enter image description here

мой код

нажмите кнопку начальной загрузки по jquery 

$(document).ready(function(){
    var id;
    $("#todo_list a[class='title_for_list']").click(function(e){
        e.preventDefault();
        id = $(this).attr('id');

        window.history.pushState("", "", '/todo/'+id)
        $.get(id)
            .done((html) => {
                $('#myModal_button').hide();
                $("#myModal").html(html)
                $( "#myModal_button" ).trigger("click");
                // $( "#myModal_button3" ).trigger("click");
            })
            .fail(() => {
                console.log("fail");
            })
            .always(() => {
                console.log('always');
            })
    });
})

модальная кнопка 

  <button id="btnModal" type="button" class="btn btn-primary" data-toggle="modal">
    Open modal
  </button>

модальный ((Модальный завершается с использованием полученного HTML) 

<div class="modal fade" id="myModal">
    12
</div>

модальное содержание 

https://github.com/hyunsokstar/django_inflearn2/blob/master/todo/templates/todo/_todo_detail.html

1 Ответ

1 голос
/ 21 мая 2019

использовать два режима для события нажатия кнопки и использовать разные идентификаторы для modal

 #myModal
    {
     left:50% !important; 
     width:48% !important;
    }

    #myModalTwo
    {
     right:50% !important; 
      width:48% !important;
    }


$("#btnModal").click(function() {
	$("#myModalTwo").modal("show");
  $("#myModal").modal("show");
})
#myModal
{
 left:50% !important; 
 width:48% !important;
}

#myModalTwo
{
 right:50% !important; 
  width:48% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Modal Example</h2>
  <!-- Button to Open the Modal -->
  <button id="btnModal" type="button" class="btn btn-primary" data-toggle="modal">
    Open modal
  </button>

  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
  <div class="modal" id="myModalTwo">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
  
</div>
...