Modificare l'effetto bootstrap modale

54

Se si dà un'occhiata ai bootstraps fade classe utilizzati con la finestra modale troverete, che tutto quello che fa, è quello di impostare il valore opacity-0 e aggiunge una transizione per la regola opacity.

Ogni volta che si avvia un modale, viene aggiunta la classe in e il valore di opacity viene modificato in un valore di 1.

Sapendo che è possibile creare facilmente la propria classe fade-scale.

Ecco un esempio.

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

- AGGIORNAMENTO -

Questa risposta è sempre più fino voti ultimamente così ho pensato che aggiungo un aggiornamento per mostrare quanto sia facile per personalizzare il modal BS animazioni dentro e fuori con l'aiuto della grande libreria Animate.css di
Daniel Eden.

Tutto ciò che è necessario fare è includere il foglio di stile nella sezione <head></head>. Ora è sufficiente aggiungere la classe animated, più una delle classi di accesso della libreria all'elemento modale.

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

Ma v'è anche un modo per aggiungere un'animazione fuori alla finestra modale e dal momento che la biblioteca ha un sacco di animazioni fresco che renderanno un elemento scomparire, perché non li utilizzano. :)

Per utilizzarli è necessario alternare le classi sull'elemento modale, quindi è meglio chiamare la finestra modale tramite JavaScript, che è descritto here.

Avrete anche bisogno di ascoltare alcuni degli eventi modali per sapere quando è il momento di aggiungere o rimuovere le classi dall'elemento modale. Gli eventi che vengono generati sono descritti here.

Per attivare un'animazione personalizzata non è possibile utilizzare l'attributo data-dismiss="modal" su un button all'interno della finestra modale che supponiamo di chiudere il modal. Puoi semplicemente aggiungere il tuo attributo come data-custom-dismiss="modal" e usarlo per chiamare il metodo $('selector').modal.('hide').

Ecco un esempio che mostra tutte le diverse possibilità.

/* ------------------------------------------------------- 
 
| 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>

fonte

2015-08-23 16:32:34 DavidDomain

+1

effetto chiuso? – HamedH

+0

Che cos'è l'effetto di chiusura? – DavidDomain

3

Ecco puro Bootstrap 4 con CSS 3 soluzione.

<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); 
})

esempio completa here.

Forse aiuterà qualcuno.

-

Grazie @DavidDomain troppo.

fonte

2017-04-10 17:32:52

+0

E l'effetto di chiusura? – HamedH

+1

L'ho aggiornato per te @HamedH - vedi il codice #css "display: block! Important;" e #js "hide.bs.modal", –

0

Una soluzione riot.js:

mio riot.js Esempio nidifica il tag animato modale all'interno di un tag profilo ordine.

Nota, ciò presuppone jquery e riot.js è stato caricato prima.

animated-modale contenuto del tag:

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

e il profilo Tag a nidificare in:

contenuto profilo tag:

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

fonte

2017-04-21 15:19:55 mzakany23

0

ho copiato mod codice da w3school bootstrap model e aggiunto in seguito css. Questo codice offre una bella animazione. Puoi provarlo.

.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; 
}

fonte

2017-09-07 11:46:10

Modificare l'effetto bootstrap modale

risposta

Problemi correlati