1. 首頁
  2. 問答
  3. 更改引導模態效應

更改引導模態效應

2015-08-23 48 views
16

我發現這個Demo，更改引導模態效應

演示有一個漂亮的效果，我想知道如果任何人有辦法適用這個演示是容易引導模態 特別是第一個使用（淡入在&規模）

來源

2015-08-23 Mohamed Samy

+0

http://stackoverflow.com/questions/10143444/twitter-bootstrap-modal-how-to-remove-slide-down-effect –

+0

我知道這是一個老帖子，但有些人可能要實施這沒有清理源代碼，所以這裏是直接鏈接到文章/教程的源代碼：https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ – Nicki

回答

54

如果你看一看的白手起家fade類的模態窗口，你會發現使用，該過程所做的，是將opacity值設置爲0，並添加了對opacity規則的過渡。

無論何時啓動模式，in類都會添加並將opacity更改爲值1。

知道你可以很容易地建立你自己的fade-scale類。

這裏是一個例子。

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); 
 

 
.fade-scale { 
 
    transform: scale(0); 
 
    opacity: 0; 
 
    -webkit-transition: all .25s linear; 
 
    -o-transition: all .25s linear; 
 
    transition: all .25s linear; 
 
} 
 

 
.fade-scale.in { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade-scale" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

- 更新 -

這個答案是最近獲得更多選票，所以我想我添加的更新，以顯示它是多麼容易定製BS模式在偉大的Animate.css庫的幫助下進出動畫
丹尼爾伊登。

所有需要做的就是將樣式表包含到您的<head></head>部分。現在，您只需添加animated類，再加上庫的一個入口類到模態元素。

<div class="modal animated fadeIn" id="myModal" tabindex="-1" role="dialog" ...> 
    ... 
</div>

但也有一出動畫添加到模態窗口的方法，並且因爲圖書館有一堆很酷的動畫，這將使元素消失了，爲什麼不使用他們。 :)

要使用它們，您需要切換模態元素上的類，所以實際上最好通過JavaScript調用模態窗口，其描述爲here。

您還需要偵聽一些模態事件，以瞭解何時需要從模態元素中添加或刪除類。被解僱的事件描述爲here。

要觸發定製動畫，您不能在模型窗口內的button屬性上使用data-dismiss="modal"屬性，該屬性假定關閉模態。您可以簡單地添加自己的屬性，如data-custom-dismiss="modal"，並使用它來調用其上的$('selector').modal.('hide')方法。

下面是一個顯示所有不同可能性的示例。

/* ------------------------------------------------------- 
 
| This first part can be ignored, it is just getting 
 
| all the different entrance and exit classes of the 
 
| animate-config.json file from the github repo. 
 
--------------------------------------------------------- */ 
 

 
var animCssConfURL = 'https://api.github.com/repos/daneden/animate.css/contents/animate-config.json'; 
 
var selectIn = $('#animation-in-types'); 
 
var selectOut = $('#animation-out-types'); 
 
var getAnimCSSConfig = function (url) { return $.ajax({ url: url, type: 'get', dataType: 'json' }) }; 
 
var decode = function (data) { 
 
    var bin = Uint8Array.from(atob(data['content']), function(char) { return char.charCodeAt(0) }); 
 
    var bin2Str = String.fromCharCode.apply(null, bin); 
 
    return JSON.parse(bin2Str) 
 
} 
 
var buildSelect = function (which, name, animGrp) { 
 
    var grp = $('<optgroup></optgroup>'); 
 
    grp.attr('label', name); 
 
    $.each(animGrp, function (idx, animType) { 
 
    var opt = $('<option></option>') 
 
    opt.attr('value', idx) 
 
    opt.text(idx) 
 
    grp.append(opt); 
 
    }) 
 
    which.append(grp) \t 
 
} 
 
getAnimCSSConfig(animCssConfURL) 
 
    .done (function (data) { 
 
    var animCssConf = decode (data); 
 
    $.each(animCssConf, function(name, animGrp) { 
 
    if (/_entrances/.test(name)) { 
 
     buildSelect(selectIn, name, animGrp); 
 
    } 
 
    if (/_exits/.test(name)) { 
 
     buildSelect(selectOut, name, animGrp); 
 
    } 
 
    }) 
 
}) 
 

 

 
/* ------------------------------------------------------- 
 
| Here is were the fun begins. 
 
--------------------------------------------------------- */ 
 

 
var modalBtn = $('button'); 
 
var modal = $('#myModal'); 
 
var animInClass = ""; 
 
var animOutClass = ""; 
 

 
modalBtn.on('click', function() { 
 
    animInClass = selectIn.find('option:selected').val(); 
 
    animOutClass = selectOut.find('option:selected').val(); 
 
    if (animInClass == '' || animOutClass == '') { 
 
    alert("Please select an in and out animation type."); 
 
    } else { 
 
    modal.addClass(animInClass); 
 
    modal.modal({backdrop: false}); 
 
    } 
 
}) 
 

 
modal.on('show.bs.modal', function() { 
 
    var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]'); 
 
    closeModalBtns.one('click', function() { 
 
    modal.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(evt) { 
 
     modal.modal('hide') 
 
    }); 
 
    modal.removeClass(animInClass).addClass(animOutClass); 
 
    }) 
 
}) 
 

 
modal.on('hidden.bs.modal', function (evt) { 
 
    var closeModalBtns = modal.find('button[data-custom-dismiss="modal"]'); 
 
    modal.removeClass(animOutClass) 
 
    modal.off('webkitAnimationEnd oanimationend msAnimationEnd animationend') 
 
    closeModalBtns.off('click') 
 
})
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'); 
 

 
select, button:not([data-custom-dismiss="modal"]) { 
 
    margin: 10px 0; 
 
    width: 220px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4"> 
 
     <select id="animation-in-types"> 
 
     <option value="" selected>Choose animation-in type</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4"> 
 
     <select id="animation-out-types"> 
 
     <option value="" selected>Choose animation-out type</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4"> 
 
     <button class="btn btn-default">Open Modal</button> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Modal --> 
 
<div class="modal animated" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-custom-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-custom-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-08-23 16:32:34 DavidDomain

+1

關閉效果？ – HamedH

+0

什麼是封閉效應？ – DavidDomain

3

這裏是純Bootstrap 4與CSS 3溶液。

<div class="modal fade2" 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"> 
     </div> 
     <div class="modal-body"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> 
     </div> 
    </div> 
    </div> 
</div> 

.fade2 { 
    transform: scale(0.9); 
    opacity: 0; 
    transition: all .2s linear; 
    display: block !important; 
} 

.fade2.show { 
    opacity: 1; 
    transform: scale(1); 
} 

$('#exampleModal').modal(); 

function afterModalTransition(e) { 
    e.setAttribute("style", "display: none !important;"); 
} 
$('#exampleModal').on('hide.bs.modal', function (e) { 
    setTimeout(() => afterModalTransition(this), 200); 
})

完整示例here。

也許它會幫助別人。

-

謝謝@DavidDomain。

來源

2017-04-10 17:32:52

+0

關閉效果如何？ – HamedH

+1

我爲你更新了@HamedH - 查看代碼#css「display：block！important;」和#js「hide.bs.modal」， –

0

riot.js甲溶液：

我riot.js實施例嵌套的順序配置文件標籤內的動畫的模態標籤。

請注意，這裏假設jquery和riot.js是之前加載的。

動畫模態的標籤內容：

<a id='{ opts.el }' href="" class='pull-right'>edit</a> 

    <div class="modal animated" id="{ opts.el }-modal" tabindex="-1" role="dialog" aria-labelledby="animatedModal"> 
     <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button onclick={ cancelForm } id='{ opts.el }-cancel-1' type="button" class="close" ><span>&times;</span></button> 
      <h4 class="modal-title" id="animatedModal">{ opts.title }</h4> 
      </div> 
      <div class="modal-body"> 
       <yield/> 
      </div> 
      <div class="modal-footer"> 
      <button onclick={ cancelForm } id='{ opts.el }-cancel-2' onclick={ cancelForm } type="button" class="btn btn-default">Close</button> 
      <button onclick={ saveForm } type="button" class="btn btn-primary">Save changes</button> 
      </div> 

     </div> 
     </div> 
    </div> 

    <script> 
    var self = this 
    self.modalBtn = `#${opts.el}` 
    self.modal = `#${opts.el}-modal` 
    self.animateInClass = opts.animatein || 'fadeIn' 
    self.animateOutClass = opts.animateout || 'fadeOut' 
    self.closeModalBtn = `#${ opts.el }-cancel-1, #${ opts.el }-cancel-2` 
    self.animationsStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' 

    this.on('mount',function(){ 
     self.initModal() 
     self.update() 
    }) 

    this.initModal = function(){ 
     modal = $(self.modal) 
     modalBtn = $(self.modalBtn) 
     closeModalBtn = `#${ opts.el }-cancel-1` 

     modalBtn.click(function(){ 
      $(self.modal).addClass(self.animateInClass) 
      $(self.modal).modal('show') 
     }) 

     $(self.modal).on('show.bs.modal',function(){ 
      $(self.closeModalBtn).one('click',function(){ 
       $(self.modal).removeClass(self.animateInClass).addClass(self.animateOutClass) 

       $(self.modal).on(self.animationsStr,function(){ 
        $(self.modal).modal('hide') 
       }) 
      }) 
     }) 

     $(self.modal).on('hidden.bs.modal',function(evt){ 
      $(self.modal).removeClass(self.animateOutClass) 
      $(self.modal).off(self.animationsStr) 
      $(self.closeModalBtn).off('click') 
     }) 
    } 

    this.cancelForm = function(e){ 
     this.parent.cancelForm() 
    } 

    this.showEdit = function(e){ 
     this.parent.showEdit() 
    } 

    this.saveForm = function(e){ 
     this.parent.saveForm() 
    } 

    dashboard_v2.bus.on('closeModal',function(){ 
     try{ 
      $(`#${ opts.el }-cancel-1`).trigger('click') 
     }catch(e){} 

    }) 
</script>

而且文件標記窩在：

簡介標籤內容：

<div class="row"> 
     <div class="col-md-12"> 
      <div class="eshop-product-body"> 

       <animated-modal> 
        title='Order Edit' 
        el='order-modal-1'> 

        <div class="row"> 
         <div class="col-md-6 col-md-offset-3"> 
          <form id='profile-form'> 
           <div class="form-group"> 
            <label>Organization</label> 
            <input id='organization' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
           </div> 

           <div class="form-group"> 
            <label>Contact</label> 
            <input id='contact' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
           </div> 

           <div class="form-group"> 
            <label>Phone</label> 
            <input id='phone' type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
           </div> 

           <div class="form-group"> 
            <label>Email</label> 
            <input id='email' type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
           </div> 
          </form> 
         </div> 
        </div> 

       </animated-modal> 

       <h3>Profile</h3> 

       <ul class='profile-list'> 
        <li>Organization: { opts.data.profile.organization }</li> 
        <li>Contact: { opts.data.profile.contact_full_name }</li> 
        <li>Phone: { opts.data.profile.phone_number }</li> 
        <li>Email: { opts.data.profile.email }</li> 
       </ul> 
      </div> 
     </div> 
    </div> 

    <script> 
     var self = this  

     this.on('mount',function(){ 

     }) 

     this.cancelForm = function(e){ 

     } 

     this.showEdit = function(e){ 

     } 

     this.saveForm = function(e){ 

     } 
    </script>

來源

2017-04-21 15:19:55 mzakany23

0

我複製MOD el代碼從w3school bootstrap model並添加以下css。此代碼提供了美麗的動畫。你可以嘗試一下。

.modal.fade .modal-dialog { 
    -webkit-transform: scale(0.1); 
    -moz-transform: scale(0.1); 
    -ms-transform: scale(0.1); 
    transform: scale(0.1); 
    top: 300px; 
    opacity: 0; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    transition: all 0.3s; 
} 

.modal.fade.in .modal-dialog { 
    -webkit-transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    -webkit-transform: translate3d(0, -300px, 0); 
    transform: translate3d(0, -300px, 0); 
    opacity: 1; 
}

來源

2017-09-07 11:46:10

相關問題

 相關問題