2016-08-22 8 views

答えて

0

私は自分のjsとcssを作成してminmizeやmaximizeのような気分にしました。私はjqueryを使っています。

SCRIPT

$("body").on("click", ".toggle-popup", function() { 
    $(".modal-backdrop").hide(); 
    $(this).closest(".modal").toggleClass("minimize"); 
    $(this).find("i").addClass("fa-window-maximize"); 
    $(this).find("i").removeClass("fa-window-minimize"); 
    $("body").removeClass("modal-open"); 
}) 
$("body").on("click", ".minimize .toggle-popup", function() { 
    $(".modal-backdrop").show(); 
    $(this).find("i").removeClass("fa-window-maximize"); 
    $(this).find("i").addClass("fa-window-minimize"); 
    $("body").addClass("modal-open"); 
}) 

CSS

<style type="text/css"> 
     .modal.minimize{ 
      position: fixed; 
      top: auto; 
      right: auto; 
      bottom: 10px; 
      left: 10px; 
     } 
     .modal.minimize .modal-body, .modal.minimize .modal-footer{ 
      display: none; 
     } 
     .modal.minimize .modal-dialog{ 
      margin: 0; 
      width: 200px; 
     } 
     .modal.minimize .modal-dialog .modal-header{ 
      padding: 5px; 
      background-color: #EEE; 
     } 
     .modal.minimize .modal-dialog .modal-header h3{ 
      font-size: 16px; 
     } 
    </style> 
関連する問題