Cách hiển thị hộp thoại chọn trong bootstrap

Có 2 cách hiển thị hộp thoại trong bootstrap

Hiển thị hộp thoại thông thường
HIển thị hộp thoại dạng iframe bootstrap

1. Hiển thị hộp thoại thông thường

Bước 1: Tạo 1 trang HTML

Bước 2: Thêm html nút lệnh button

Bước 3: Chèn lệnh html hộp thoại



<!-- Modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

  <div class="modal-dialog" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

* Cấu hình thay đổi độ rộng và chiều cao của hộp thoại hiển thị
B1: Tìm dòng
<div class="modal-dialog" role="document">
Cách 1: thêm sau modal-dialog các từ bên dưới

** để trống:     500px
modal-xl        1140px
modal-lg        800px
modal-sm        300px

Cách 2: tùy chọn
Thêm thẻ style:
<div class="modal-dialog" role="document" style="max-width:600px;height:500px;">
hay sử dụng %
<div class="modal-dialog" role="document" style="max-width:80%;height:500px;">
height: không sử dụng được %

B2: Tìm dòng
<div class="modal-body">
Trong thẻ này phải chứa 1 div có
<div style="max-width:100%;height:500px;overflow:auto;">
...
</div>
** Đầy đủ hơn:
<div style="max-width:100%;height:500px;overflow-x:hidden;padding-right:10px;">
overflow-x: không hiển thị scroll chiều ngang
padding-right:10px: không bị lấp nội dung

** phần có thể bỏ:
<div class="modal-dialog" role="document" style="max-width:600px;~~height:500px;~~">

* Tác động đến vị trí hiển thị cửa sổ với cửa sổ chính
Tìm dòng :
<div class="modal-dialog" role="document">
Thêm: modal-dialog-centered

2. Hiển thị hộp thoại có sử dụng iframe



<button type="button" class="btn btn-danger btDatCauHoi" data-toggle="modal" data-target="#Obj_popup_pIIF"><i class="fa fa-question"></i> Đặt câu hỏi</button>



<div class="modal fade" id="Obj_popup_pIIF"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  >

  <div class="modal-dialog modal_dialog_pIIF" style="max-width:95%;height: 90%;" >

    <div class="modal-content scrollablewrapper"   >

      <div class="modal-header">

        <strong style="text-transform:uppercase" class="text-primary title_pp_pIIF">tieu de</strong>

        <button type="button" class="close close_pIIF" data-dismiss="modal" aria-hidden="true">×</button>

        <h4 class="modal-title" id="Obj_myModalLabel" >close</h4>

      </div>

      <div class="modal-body">       

       <iframe width="100%" id="Obj_popup_frame_pIIF" src="loadding.htm" frameborder="0" allowtransparency="true" name="theframe" ></iframe>

      </div>

    </div>

  </div>

</div>



<script>

function IIF_f_OpenUrlPopup_h(url_go,width,height,title)

{

   style="width:100%;height:"+height+";";

    $(".title_pp_pIIF").html(title);

    var style_modal_dialog="max-width:"+width+";height: 90%;";

    $(".modal_dialog_pIIF").attr("style",style_modal_dialog);

    $("#Obj_popup_frame_pIIF").attr("style",style);

    $("#Obj_popup_frame_pIIF").attr("src",url_go);   

}



  $('.btDatCauHoi').click(function(){

        IIF_f_OpenUrlPopup_h("https://nhatthanh.net/lien-he/?tieude=HOI &madichvu=Web_iif_DatCauHoi","800px","600px","Đặt câu hỏi");

   });

</script>

Cách hiển thị hộp thoại chọn trong bootstrap

Code html hiển thị hộp thoại chọn trong bootstrap

1. Hiển thị hộp thoại thông thường

2. Hiển thị hộp thoại có sử dụng iframe