磁気にスライディングウィンドウを実装する方法2は、管理者

Question

Magentoの2管理者のバックエンドは、私たちが新しいスライディングウィンドウを右side.forサンプルビューから来widnowをクリックして一つのユーザーインターフェースは、

に行きました

製品 - >は、catalog>私にthis.very重要で助けてください知っている誰module.if私たちのカスタムでこのスライドエフェクトを実装する方法

addVideoボタンを製品 - >画像や動画タブ - >を追加し、クリックしてください。

Answer 1

これはモーダルを使用して実装されていますが、管理フォームでカスタムhtmlを使用できます。ここでは基本的なHTMLの実装のための通常の例です。

.modal.left .modal-dialog, 
 
\t .modal.right .modal-dialog { 
 
\t \t position: fixed; 
 
\t \t margin: auto; 
 
\t \t width: 320px; 
 
\t \t height: 100%; 
 
\t \t -webkit-transform: translate3d(0%, 0, 0); 
 
\t \t  -ms-transform: translate3d(0%, 0, 0); 
 
\t \t  -o-transform: translate3d(0%, 0, 0); 
 
\t \t   transform: translate3d(0%, 0, 0); 
 
\t } 
 

 
\t .modal.left .modal-content, 
 
\t .modal.right .modal-content { 
 
\t \t height: 100%; 
 
\t \t overflow-y: auto; 
 
\t } 
 
\t 
 
\t .modal.left .modal-body, 
 
\t .modal.right .modal-body { 
 
\t \t padding: 15px 15px 80px; 
 
\t } 
 

 
/*Left*/ 
 
\t .modal.left.fade .modal-dialog{ 
 
\t \t left: -320px; 
 
\t \t -webkit-transition: opacity 0.3s linear, left 0.3s ease-out; 
 
\t \t -moz-transition: opacity 0.3s linear, left 0.3s ease-out; 
 
\t \t  -o-transition: opacity 0.3s linear, left 0.3s ease-out; 
 
\t \t   transition: opacity 0.3s linear, left 0.3s ease-out; 
 
\t } 
 
\t 
 
\t .modal.left.fade.in .modal-dialog{ 
 
\t \t left: 0; 
 
\t } 
 
     
 
/*Right*/ 
 
\t .modal.right.fade .modal-dialog { 
 
\t \t right: -320px; 
 
\t \t -webkit-transition: opacity 0.3s linear, right 0.3s ease-out; 
 
\t \t -moz-transition: opacity 0.3s linear, right 0.3s ease-out; 
 
\t \t  -o-transition: opacity 0.3s linear, right 0.3s ease-out; 
 
\t \t   transition: opacity 0.3s linear, right 0.3s ease-out; 
 
\t } 
 
\t 
 
\t .modal.right.fade.in .modal-dialog { 
 
\t \t right: 0; 
 
\t } 
 

 
/* ----- MODAL STYLE ----- */ 
 
\t .modal-content { 
 
\t \t border-radius: 0; 
 
\t \t border: none; 
 
\t } 
 

 
\t .modal-header { 
 
\t \t border-bottom-color: #EEEEEE; 
 
\t \t background-color: #FAFAFA; 
 
\t } 
 

 
/* ----- v CAN BE DELETED v ----- */ 
 
body { 
 
\t background-color: #78909C; 
 
} 
 

 
.demo { 
 
\t padding-top: 60px; 
 
\t padding-bottom: 110px; 
 
} 
 

 
.btn-demo { 
 
\t margin: 15px; 
 
\t padding: 10px 15px; 
 
\t border-radius: 0; 
 
\t font-size: 16px; 
 
\t background-color: #FFFFFF; 
 
} 
 

 
.btn-demo:focus { 
 
\t outline: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container demo"> 
 
\t <div class="text-center"> 
 

 
\t \t <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2"> 
 
\t \t \t Click Here 
 
\t \t </button> 
 
\t </div> 
 
\t 
 
\t <!-- Modal --> 
 
\t <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"> 
 
\t \t <div class="modal-dialog" role="document"> 
 
\t \t \t <div class="modal-content"> 
 

 
\t \t \t \t <div class="modal-header"> 
 
\t \t \t \t \t <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
\t \t \t \t \t <h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="modal-body"> 
 
\t \t \t \t \t <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </div> 
 

 
\t \t \t </div><!-- modal-content --> 
 
\t \t </div><!-- modal-dialog --> 
 
\t </div><!-- modal --> 
 
\t 
 
</div><!-- container -->