利用js实现支持弹出图片文字和表单模态框代码



36 142 48



特效描述:利用js实现 支持弹出图片 文字和表单 模态框代码,利用js实现支持弹出图片文字和表单模态框代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="dist/MODALit.min.css">

2. 引入JS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js">flexibility(document.documentElement);</script>
<script src="dist/MODALit.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="htmleaf-container">
		<section id="demo">
        <div class="container features align center">
            <h2>DEMO</h2>
            <div class="demo">
                <h3>Transition</h3>
                <ul>
                    <li><button type="button" class="btn demo-transition" data-content="Zoom" data-transition="zoom">Zoom</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Flip" data-transition="flip">Flip</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Left" data-transition="slideLeft">Slide Left</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Right" data-transition="slideRight">Slide Right</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Up" data-transition="slideUp">Slide Up</button></li>
                    <li><button type="button" class="btn demo-transition" data-content="Slide Down" data-transition="slideDown">Slide Down</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Position</h3>
                <ul>
                    <li><button type="button" class="btn demo-position" data-content="Default" data-transition="zoom">Default</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Left" data-position="left" data-transition="slideRight">Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Right" data-position="right" data-transition="slideLeft">Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top" data-position="top" data-transition="slideDown">Top</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom" data-position="bottom" data-transition="slideUp">Bottom</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Right" data-position="right top" data-transition="slideDown">Top Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Top Left" data-position="left top" data-transition="slideDown">Top Left</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Right" data-position="right bottom" data-transition="slideUp">Bottom Right</button></li>
                    <li><button type="button" class="btn demo-position" data-content="Bottom Left" data-position="left bottom" data-transition="slideUp">Bottom Left</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Sizes</h3>
                <ul>
                    <li><button type="button" class="btn demo-size" data-width="small" data-content="Small dialog">Small</button></li>
                    <li><button type="button" class="btn demo-size" data-width="large" data-content="Large dialog">Large</button></li>
                    <li><button type="button" class="btn demo-size" data-width="full" data-footer="" data-transition="slideDown" data-content="Fullscreen dialog">Full</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Media</h3>
                <ul>
                    <li><button type="button" class="btn demo-media" data-src="http://sc.chinaz.com" data-caption="<a href='http://www.51qianduan.com/'><svg xmlns='http://www.51qianduan.com//2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> ian dooley</a>">Image</button></li>
                    <li><button type="button" class="btn demo-media" data-src="https://www.youtube.com/watch?v=rmf54oNI6ts">Youtube</button></li>
                    <li><button type="button" class="btn demo-media" data-title="Bacon Ipsum" data-src="/baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=html">Ajax</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Gallery</h3>
                   <ul>
                    <li><img data-src="https://source.unsplash.com/5i8l46zW8do" src="https://source.unsplash.com/5i8l46zW8do/200x200" data-caption="<a href='https://unsplash.com/@brunels_world?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Brunel Johnson</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/2o_2syCZS5M" src="https://source.unsplash.com/2o_2syCZS5M/200x200" data-caption="<a href='https://unsplash.com/@matheusferrero?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Matheus Ferrero</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/ilPwXo3qhEo" src="https://source.unsplash.com/ilPwXo3qhEo/200x200" data-caption="<a href='https://unsplash.com/@ilyayakover?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Ilya Yakover</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/tcgMBsW4zlU" src="https://source.unsplash.com/tcgMBsW4zlU/200x200" data-caption="<a href='https://unsplash.com/@karishea?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Kari Shea</a>" class="demo-gallery"></li>
                    <li><img data-src="https://source.unsplash.com/dI9KhXi0ooE" src="https://source.unsplash.com/dI9KhXi0ooE/200x200" data-caption="<a href='https://unsplash.com/@osmanrana?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge' target='_blank'><svg xmlns='http://www.w3.org/2000/svg' style='height:12px;width:auto;fill:white;' viewBox='0 0 32 32'><path d='M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z'></path></svg> Osman Rana</a>" class="demo-gallery"></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Confirm</h3>
                <p><button type="button" class="btn demo-confirm">Confirm</button></p>
            </div>
            <div class="demo">
                <h3>Nested</h3>
                <p><button type="button" id="btn-nested1" class="btn">Nested</button></p>
            </div>
            <div class="demo">
                <h3>Body Scrolling</h3>
                <ul>
                    <li><button id="prevent" type="button" class="btn">Prevent</button></li>
                    <li><button id="scrollable" type="button" class="btn">Scrollable</button></li>
                </ul>
            </div>
            <div class="demo">
                <h3>Backdrop</h3>
                <p><button id="overlay" type="button" class="btn">Disable</button></p>
            </div>
        </div>
    </section>
    <section id="customize">
        <div class="container features align center">
            <h2>Customize</h2>
            <div class="demo">
                <h3>CSS</h3>
                <p><button id="btnCss" type="button" class="btn">Custom Style</button></p>
            </div>
            <div class="demo">
                <h3>Form</h3>
                <p><button id="btnLogin" type="button" data-target="#login" class="btn">Login</button><br><small>( ID:admin / PASS:1234 )</small></p>
            </div>
            <div class="demo">
                <h3>Navigation</h3>
                <p><button id="btnNav" type="button" class="btn">Sidebar</button></p>
            </div>
            <div class="demo">
                <h3>Scroll</h3>
                <div id="scroll">
                    <p>Scroll down the page, the popup would be appear at the right side corner.</p>
                    <p class="icon arrow"></p>
                </div>
            </div>
        </div>
    </section>
    <footer id="footer">
        <div class="container align center">
            <p><small><a href="https://knot-design.jp/en/">© 2017 Copyright Knot Design</a></small></p>
        </div>
    </footer>
    <div id="login" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Login</h3>
            </header>
            <form class="content" name="login">
                <p>
                    <label>
                        <input type="text" name="id" class="validate" required>
                        <span class="label">ID</span>
                    </label>
                    <label>
                        <input type="password" name="pswd" class="validate" required>
                        <span class="label">PASS</span>
                    </label>
                </p>
            </form>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn light">Cancel</button>
                    <button type="button" data-modal-btn="action" class="btn primary">Login</button>
                </p>
            </footer>
        </div>
    </div>
    <div id="scroller" class="modalit" aria-hidden="true">
        <div class="dialog">
            <header>
                <h3>Scrolling Popup</h3>
            </header>
            <div class="content">
                <p>In the future, do not show this popup.</p>
            </div>
            <footer>
                <p>
                    <button type="button" data-modal-btn="dismiss" class="btn primary">Yep!</button>
                </p>
            </footer>
        </div>
    </div>
    <div id="nested" class="modalit" aria-hidden="true">
        <div class="dialog">
            <div class="content">
                <p><button id="btn-nested2" type="button" class="btn primary">Try to click!</button></p>
            </div>
            <span data-modal-btn="dismiss"></span>
        </div>
    </div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 提示框/弹出层

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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