× İletişim Formu Blogger 32 Farklı Modal Tasarımı Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <link rel='stylesheet prefetch' href='https://rawgit.com/jquerycods/css/master/modal.min.css'/> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;color:#555;margin:0 auto} .container{padding-bottom:140px} .blogger-modal{margin:0 0 10px;list-style:none} .blogger-modal li{display:inline-block;margin:4px;padding:0} .btn:focus{outline:none} .modExample .btn{margin:4px 8px 4px 0} </style> </head> <body> <div class="container"> <div class="modExample"> <h2>Blogger Animasyonlu Modal Tasarımı</h2> <a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">Modal-1</a> <div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal2" role="button" class="btn btn-default" data-toggle="modal">Modal-2</a> <div id="myModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal3" role="button" class="btn btn-default" data-toggle="modal">Modal-3</a> <div id="myModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal4" role="button" class="btn btn-default" data-toggle="modal">Modal-4</a> <div id="myModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <br /> <a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">Modal-5</a> <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal6" role="button" class="btn btn-default" data-toggle="modal">Modal-6</a> <div id="myModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal7" role="button" class="btn btn-default" data-toggle="modal">Modal-7</a> <div id="myModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal8" role="button" class="btn btn-default" data-toggle="modal">Modal-8</a> <div id="myModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal9" role="button" class="btn btn-default" data-toggle="modal">Modal-9</a> <div id="myModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal10" role="button" class="btn btn-default" data-toggle="modal">Modal-10</a> <div id="myModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal11" role="button" class="btn btn-default" data-toggle="modal">Modal-11</a> <div id="myModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal12" role="button" class="btn btn-default" data-toggle="modal">Modal-12</a> <div id="myModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal13" role="button" class="btn btn-default" data-toggle="modal">Modal-13</a> <div id="myModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">Modal-14</a> <div id="myModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal16" role="button" class="btn btn-default" data-toggle="modal">Modal-15</a> <div id="myModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal17" role="button" class="btn btn-default" data-toggle="modal">Modal-16</a> <div id="myModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal18" role="button" class="btn btn-default" data-toggle="modal">Modal-17</a> <div id="myModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal14" role="button" class="btn btn-default" data-toggle="modal">Modal-18</a> <div id="myModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal19" role="button" class="btn btn-default" data-toggle="modal">Modal-19</a> <div id="myModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal20" role="button" class="btn btn-default" data-toggle="modal">Modal-20</a> <div id="myModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal21" role="button" class="btn btn-default" data-toggle="modal">Modal-21</a> <div id="myModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal22" role="button" class="btn btn-default" data-toggle="modal">Modal-22</a> <div id="myModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal23" role="button" class="btn btn-default" data-toggle="modal">Modal-23</a> <div id="myModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal24" role="button" class="btn btn-default" data-toggle="modal">Modal-24</a> <div id="myModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal25" role="button" class="btn btn-default" data-toggle="modal">Modal-25</a> <div id="myModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal26" role="button" class="btn btn-default" data-toggle="modal">Modal-26</a> <div id="myModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal27" role="button" class="btn btn-default" data-toggle="modal">Modal-27</a> <div id="myModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal28" role="button" class="btn btn-default" data-toggle="modal">Modal-28</a> <div id="myModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal29" role="button" class="btn btn-default" data-toggle="modal">Modal-29</a> <div id="myModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal30" role="button" class="btn btn-default" data-toggle="modal">Modal-30</a> <div id="myModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal31" role="button" class="btn btn-default" data-toggle="modal">Modal-31</a> <div id="myModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal32" role="button" class="btn btn-default" data-toggle="modal">Modal-32</a> <div id="myModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> </div> <p> <h2>Animasyonlu İpucu Kutusu</h2> <div> <ul class="blogger-modal"> <li><a data-original-title="İpucu-1" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-1</a></li> <li><a data-original-title="İpucu-2" data-animation="false" data-easein="flipXIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-2</a></li> <li><a data-original-title="İpucu-3" data-animation="false" data-easein="flipYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-3</a></li> <li><a data-original-title="İpucu-4" data-animation="false" href="#" data-easein="flipBounceXIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-4</a></li> <li><a data-original-title="İpucu-5" data-animation="false" data-easein="flipBounceYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-5</a></li> <li><a data-original-title="İpucu-6" data-animation="false" data-easein="swoopIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-6</a></li> <li><a data-original-title="İpucu-7" data-animation="false" data-easein="whirlIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-7</a></li> <li><a data-original-title="İpucu-8" data-animation="false" href="#" data-easein="shrinkIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-8</a></li> <li><a data-original-title="İpucu-9" data-animation="false" data-easein="expandIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-9</a></li> <li><a data-original-title="İpucu-10" data-animation="false" data-easein="bounceIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-10</a></li> <li><a data-original-title="İpucu-11" data-animation="false" data-easein="bounceUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-11</a></li> <li><a data-original-title="İpucu-12" data-animation="false" href="#" data-easein="bounceDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-12</a></li> <li><a data-original-title="İpucu-13" data-animation="false" data-easein="bounceLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-13</a></li> <li><a data-original-title="İpucu-14" data-animation="false" data-easein="bounceRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-14</a></li> <li><a data-original-title="İpucu-15" data-animation="false" data-easein="slideUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-15</a></li> <li><a data-original-title="İpucu-16" data-animation="false" href="#" data-easein="slideDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-16</a></li> <li><a data-original-title="İpucu-17" data-animation="false" data-easein="slideLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-17</a></li> <li><a data-original-title="İpucu-18" data-animation="false" data-easein="slideRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-18</a></li> <li><a data-original-title="İpucu-19" data-animation="false" data-easein="slideUpBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-19</a></li> <li><a data-original-title="İpucu-20" data-animation="false" data-easein="slideDownBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-20</a></li> <li><a data-original-title="İpucu-21" data-animation="false" data-easein="slideLeftBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-21</a></li> <li><a data-original-title="İpucu-22" data-animation="false" data-easein="slideRightBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-22</a></li> <li><a data-original-title="İpucu-23" data-animation="false" data-easein="perspectiveUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-23</a></li> <li><a data-original-title="İpucu-24" data-animation="false" data-easein="perspectiveDownIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-24</a></li> <li><a data-original-title="İpucu-25" data-animation="false" data-easein="perspectiveLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-25</a></li> <li><a data-original-title="İpucu-26" data-animation="false" data-easein="perspectiveRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-26</a></li> <li><a data-original-title="İpucu-27" data-animation="false" data-easein="shake" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-27</a></li> <li><a data-original-title="İpucu-28" data-animation="false" data-easein="tada" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-28</a></li> <li><a data-original-title="İpucu-29" data-animation="false" data-easein="flash" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-29</a></li> <li><a data-original-title="İpucu-30" data-animation="false" data-easein="pulse" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-30</a></li> <li><a data-original-title="İpucu-31" data-animation="false" data-easein="swing" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-31</a></li> <li><a data-original-title="İpucu-32" data-animation="false" data-easein="bounce" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-32</a></li> </ul> </div> </div> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-1.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-2.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.ui.min.js'></script> <script type='text/javascript'> //<![CDATA[ $('a[rel=popover]').popover().click(function(e){e.preventDefault();var open=$(this).attr('data-easein');if(open=='shake'){$(this).next().velocity('callout.'+open);}else if(open=='pulse'){$(this).next().velocity('callout.'+open);}else if(open=='tada'){$(this).next().velocity('callout.'+open);}else if(open=='flash'){$(this).next().velocity('callout.'+open);}else if(open=='bounce'){$(this).next().velocity('callout.'+open);}else if(open=='swing'){$(this).next().velocity('callout.'+open);}else{$(this).next().velocity('transition.'+open);}});$(".modal").each(function(index){$(this).on('show.bs.modal',function(e){var open=$(this).attr('data-easein');if(open=='shake'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='pulse'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='tada'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='flash'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='bounce'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='swing'){$('.modal-dialog').velocity('callout.'+open);}else{$('.modal-dialog').velocity('transition.'+open);}});}); //]]> </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger 32 Farklı Modal Tasarımı" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger 32 Farklı Modal Tasarımı Arlina Design 6/02/2017 Etiketler : Blogger CSS Blogger CSS3 Blogger javaScript Blogger jQuery Blogger Modal Arlina Design <!DOCTYPE html> <html> <head> <link rel='stylesheet prefetch' href='https://rawgit.com/jquerycods/css/master/modal.min.css'/> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;color:#555;margin:0 auto} .container{padding-bottom:140px} .blogger-modal{margin:0 0 10px;list-style:none} .blogger-modal li{display:inline-block;margin:4px;padding:0} .btn:focus{outline:none} .modExample .btn{margin:4px 8px 4px 0} </style> </head> <body> <div class="container"> <div class="modExample"> <h2>Blogger Animasyonlu Modal Tasarımı</h2> <a href="#myModal1" role="button" data-target="#myModal1" class="btn btn-default" data-toggle="modal">Modal-1</a> <div id="myModal1" class="modal" data-easein="fadeIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal2" role="button" class="btn btn-default" data-toggle="modal">Modal-2</a> <div id="myModal2" class="modal" data-easein="flipXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal3" role="button" class="btn btn-default" data-toggle="modal">Modal-3</a> <div id="myModal3" class="modal" data-easein="flipYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal4" role="button" class="btn btn-default" data-toggle="modal">Modal-4</a> <div id="myModal4" class="modal" data-easein="flipBounceXIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <br /> <a href="#myModal5" role="button" class="btn btn-default" data-toggle="modal">Modal-5</a> <div id="myModal5" class="modal" data-easein="flipBounceYIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal6" role="button" class="btn btn-default" data-toggle="modal">Modal-6</a> <div id="myModal6" class="modal" data-easein="swoopIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal7" role="button" class="btn btn-default" data-toggle="modal">Modal-7</a> <div id="myModal7" class="modal" data-easein="whirlIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal8" role="button" class="btn btn-default" data-toggle="modal">Modal-8</a> <div id="myModal8" class="modal" data-easein="shrinkIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal9" role="button" class="btn btn-default" data-toggle="modal">Modal-9</a> <div id="myModal9" class="modal" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal10" role="button" class="btn btn-default" data-toggle="modal">Modal-10</a> <div id="myModal10" class="modal" data-easein="bounceIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal11" role="button" class="btn btn-default" data-toggle="modal">Modal-11</a> <div id="myModal11" class="modal" data-easein="bounceUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal12" role="button" class="btn btn-default" data-toggle="modal">Modal-12</a> <div id="myModal12" class="modal" data-easein="bounceDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal13" role="button" class="btn btn-default" data-toggle="modal">Modal-13</a> <div id="myModal13" class="modal" data-easein="bounceLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal15" role="button" class="btn btn-default" data-toggle="modal">Modal-14</a> <div id="myModal15" class="modal" data-easein="bounceRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 1</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal16" role="button" class="btn btn-default" data-toggle="modal">Modal-15</a> <div id="myModal16" class="modal" data-easein="slideUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık 2</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> <button class="btn btn-primary">Buton ekle</button> </div> </div> </div> </div> <a href="#myModal17" role="button" class="btn btn-default" data-toggle="modal">Modal-16</a> <div id="myModal17" class="modal" data-easein="slideDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal18" role="button" class="btn btn-default" data-toggle="modal">Modal-17</a> <div id="myModal18" class="modal" data-easein="slideLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal14" role="button" class="btn btn-default" data-toggle="modal">Modal-18</a> <div id="myModal14" class="modal" data-easein="slideRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal19" role="button" class="btn btn-default" data-toggle="modal">Modal-19</a> <div id="myModal19" class="modal" data-easein="slideUpBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal20" role="button" class="btn btn-default" data-toggle="modal">Modal-20</a> <div id="myModal20" class="modal" data-easein="slideDownBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal21" role="button" class="btn btn-default" data-toggle="modal">Modal-21</a> <div id="myModal21" class="modal" data-easein="slideLeftBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal22" role="button" class="btn btn-default" data-toggle="modal">Modal-22</a> <div id="myModal22" class="modal" data-easein="slideRightBigIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal23" role="button" class="btn btn-default" data-toggle="modal">Modal-23</a> <div id="myModal23" class="modal" data-easein="perspectiveUpIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal24" role="button" class="btn btn-default" data-toggle="modal">Modal-24</a> <div id="myModal24" class="modal" data-easein="perspectiveDownIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal25" role="button" class="btn btn-default" data-toggle="modal">Modal-25</a> <div id="myModal25" class="modal" data-easein="perspectiveLeftIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal26" role="button" class="btn btn-default" data-toggle="modal">Modal-26</a> <div id="myModal26" class="modal" data-easein="perspectiveRightIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal27" role="button" class="btn btn-default" data-toggle="modal">Modal-27</a> <div id="myModal27" class="modal" data-easein="shake" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal28" role="button" class="btn btn-default" data-toggle="modal">Modal-28</a> <div id="myModal28" class="modal" data-easein="tada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal29" role="button" class="btn btn-default" data-toggle="modal">Modal-29</a> <div id="myModal29" class="modal" data-easein="swing" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal30" role="button" class="btn btn-default" data-toggle="modal">Modal-30</a> <div id="myModal30" class="modal" data-easein="bounce" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal31" role="button" class="btn btn-default" data-toggle="modal">Modal-31</a> <div id="myModal31" class="modal" data-easein="flash" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> <a href="#myModal32" role="button" class="btn btn-default" data-toggle="modal">Modal-32</a> <div id="myModal32" class="modal" data-easein="pulse" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal Başlık</h4> </div> <div class="modal-body"> <p>İçeriklerinizi buraya ekleyin.</p> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Kapat</button> </div> </div> </div> </div> </div> <p> <h2>Animasyonlu İpucu Kutusu</h2> <div> <ul class="blogger-modal"> <li><a data-original-title="İpucu-1" data-animation="false" data-easein="fadeIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-1</a></li> <li><a data-original-title="İpucu-2" data-animation="false" data-easein="flipXIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-2</a></li> <li><a data-original-title="İpucu-3" data-animation="false" data-easein="flipYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-3</a></li> <li><a data-original-title="İpucu-4" data-animation="false" href="#" data-easein="flipBounceXIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-4</a></li> <li><a data-original-title="İpucu-5" data-animation="false" data-easein="flipBounceYIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-5</a></li> <li><a data-original-title="İpucu-6" data-animation="false" data-easein="swoopIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-6</a></li> <li><a data-original-title="İpucu-7" data-animation="false" data-easein="whirlIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-7</a></li> <li><a data-original-title="İpucu-8" data-animation="false" href="#" data-easein="shrinkIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-8</a></li> <li><a data-original-title="İpucu-9" data-animation="false" data-easein="expandIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-9</a></li> <li><a data-original-title="İpucu-10" data-animation="false" data-easein="bounceIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-10</a></li> <li><a data-original-title="İpucu-11" data-animation="false" data-easein="bounceUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-11</a></li> <li><a data-original-title="İpucu-12" data-animation="false" href="#" data-easein="bounceDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-12</a></li> <li><a data-original-title="İpucu-13" data-animation="false" data-easein="bounceLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="bottom" data-content="Kısa açıklama ekleyin.">buton-13</a></li> <li><a data-original-title="İpucu-14" data-animation="false" data-easein="bounceRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-14</a></li> <li><a data-original-title="İpucu-15" data-animation="false" data-easein="slideUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-15</a></li> <li><a data-original-title="İpucu-16" data-animation="false" href="#" data-easein="slideDownIn" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-16</a></li> <li><a data-original-title="İpucu-17" data-animation="false" data-easein="slideLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="right" data-content="Kısa açıklama ekleyin.">buton-17</a></li> <li><a data-original-title="İpucu-18" data-animation="false" data-easein="slideRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-18</a></li> <li><a data-original-title="İpucu-19" data-animation="false" data-easein="slideUpBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-19</a></li> <li><a data-original-title="İpucu-20" data-animation="false" data-easein="slideDownBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-20</a></li> <li><a data-original-title="İpucu-21" data-animation="false" data-easein="slideLeftBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-21</a></li> <li><a data-original-title="İpucu-22" data-animation="false" data-easein="slideRightBigIn" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-22</a></li> <li><a data-original-title="İpucu-23" data-animation="false" data-easein="perspectiveUpIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-23</a></li> <li><a data-original-title="İpucu-24" data-animation="false" data-easein="perspectiveDownIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-24</a></li> <li><a data-original-title="İpucu-25" data-animation="false" data-easein="perspectiveLeftIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-25</a></li> <li><a data-original-title="İpucu-26" data-animation="false" data-easein="perspectiveRightIn" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-26</a></li> <li><a data-original-title="İpucu-27" data-animation="false" data-easein="shake" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-27</a></li> <li><a data-original-title="İpucu-28" data-animation="false" data-easein="tada" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-28</a></li> <li><a data-original-title="İpucu-29" data-animation="false" data-easein="flash" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-29</a></li> <li><a data-original-title="İpucu-30" data-animation="false" data-easein="pulse" href="#" class="btn btn-primary" rel="popover" data-placement="left" data-content="Kısa açıklama ekleyin.">buton-30</a></li> <li><a data-original-title="İpucu-31" data-animation="false" data-easein="swing" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-31</a></li> <li><a data-original-title="İpucu-32" data-animation="false" data-easein="bounce" href="#" class="btn btn-primary" rel="popover" data-placement="top" data-content="Kısa açıklama ekleyin.">buton-32</a></li> </ul> </div> </div> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-1.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/jquery-2.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/velocity.ui.min.js'></script> <script type='text/javascript'> //<![CDATA[ $('a[rel=popover]').popover().click(function(e){e.preventDefault();var open=$(this).attr('data-easein');if(open=='shake'){$(this).next().velocity('callout.'+open);}else if(open=='pulse'){$(this).next().velocity('callout.'+open);}else if(open=='tada'){$(this).next().velocity('callout.'+open);}else if(open=='flash'){$(this).next().velocity('callout.'+open);}else if(open=='bounce'){$(this).next().velocity('callout.'+open);}else if(open=='swing'){$(this).next().velocity('callout.'+open);}else{$(this).next().velocity('transition.'+open);}});$(".modal").each(function(index){$(this).on('show.bs.modal',function(e){var open=$(this).attr('data-easein');if(open=='shake'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='pulse'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='tada'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='flash'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='bounce'){$('.modal-dialog').velocity('callout.'+open);}else if(open=='swing'){$('.modal-dialog').velocity('callout.'+open);}else{$('.modal-dialog').velocity('transition.'+open);}});}); //]]> </script> </body> </html>
Yorum Gönder