css3 bootstrap模态框弹出效果代码下载

css3 bootstrap模态框弹出效果代码下载

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="css/component.css" rel="stylesheet">

2. 引入JS

<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>

3. HTML代码

<div style="width:1000px; height:500px; padding-left:450px;">
  <table class="table" style=" background-color:#FC9">
    <thead>
      <tr>
        <th style="width:30%;">Modal Type</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="middle-align">Fade in &amp; Scale</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Slide in (right)</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-2">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Slide in (bottom)</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-3">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Newspaper</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-4">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Fall</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-5">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Side Fall</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-6">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Sticky Up</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-7">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Flip (horizontal)</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-8">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Flip (vertical)</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-9">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Sign</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-10">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Super Scaled</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-11">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">Just Me</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-12">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Slit</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-13">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Rotate Bottom</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-14">Show Me</a></td>
      </tr>
      <tr>
        <td class="middle-align">3D Rotate In Left</td>
        <td><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-15">Show Me </a></td>
      </tr>
    </tbody>
  </table>
  <div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-2" id="modal-2">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-3" id="modal-3">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-4" id="modal-4">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-5" id="modal-5">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-6" id="modal-6">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-7" id="modal-7">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-8" id="modal-8">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-9" id="modal-9">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-10" id="modal-10">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-11" id="modal-11">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-12" id="modal-12">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-13" id="modal-13">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-14" id="modal-14">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-15" id="modal-15">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-modal md-effect-16" id="modal-16">
    <div class="md-content">
      <h3>Modal Dialog</h3>
      <div>
        <p>This is a modal window. You can do the following things with it:</p>
        <ul>
          <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
          <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
          <li><strong>Close:</strong> click on the button below to close the modal.</li>
        </ul>
        <button class="md-close btn-sm btn-primary">Close me!</button>
      </div>
    </div>
  </div>
  <div class="md-overlay"></div>
  <!-- the overlay element --> 
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到