我想输出两个将屏幕分为两个的大模态

Question

当前模态是这个

我想将上述模态分为两个模态，如下所示。

例如

我的代码

通过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>

modal（（使用收到的html完成模态）

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

模式内容

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

Answer 1

通过按钮单击事件使用两种模式，并对modal使用不同的ID

 #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>