打赏

模态框zeroModal快速引入

最基本快速接入

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>

</head>
<body>

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 70%;margin-left: auto;margin-right: auto;margin-top: 20%;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body" style="height:400px;">
        <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">
         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>
        </div>
        <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">
         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>
        </div>
      </div>
    </div>
  </div>
</div> 
</body>
</html>
View Code

 


bootstrap.css、zeroModal.css、jquery.2.1.1.min.js、zeroModal.min.js、bootstrap.min.js 打包下载：

模态框zeromodal最基本快速接入包.rar

 

稍全功能最基本接入（已修改弹出的模态框标题与内容源码字体大小为24px；，见zeroModal.css中的.zeromodal-header、.zeromodal-body）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/zeroModal.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.2.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/zeroModal.min.js"></script>

</head>
<body>

<button class="btn btn-primary" id="myModalButton" data-toggle="modal" data-target="#myModal">点击空白退出</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 70%;margin-left: auto;margin-right: auto;margin-top: 20%;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body" style="height:400px;">
        <div style="height: 18%;border-bottom: 1px solid #eee;padding-top: 10px;padding-left: 30%;">
         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">zhang</span>
        </div>
        <div style="height: 80%;padding-top: 10px;padding-left: 30%;" id="nation_item">
         <span style="font-size: 16px;display: inline-block;margin-left: 10px;">yanan</span>
        </div>
      </div>
    </div>
  </div>
</div> 
    
    <div style="position:absolute;width:200px;left:220px;">
        <ol class="rounded-list">
            <li><a href="javascript:_basic()">basic</a></li>
            <li><a href="javascript:_params()">带标题</a></li>
            <li><a href="javascript:_escape()">内容不转义</a></li>
            <li><a href="javascript:_button()">带按钮</a></li>
            <li><a href="javascript:_setsize()">自定义尺寸(px、pt、%)</a></li>
            <li><a href="javascript:_custombutton()">自定义按钮</a></li>
            <li><a href="javascript:_notoverlay()">不要遮罩</a></li>
            <li><a href="javascript:_setOpacity()">设置遮罩层透明度</a></li>
            <li><a href="javascript:_iframe()">嵌套iframe</a></li>
            <li><a href="javascript:_esc()">esc键退出</a></li>
            <li><a href="javascript:_resize()">允许拖放大小</a></li>
            <li><a href="javascript:_maxmin()">允许最大化最小化</a></li>
            <li><a href="javascript:_drag()">点击层任意地方拖动</a></li>
            <li><a href="javascript:_setPosition()">自定义弹框位置</a></li>
        </ol>
    </div>
    <div style="position:absolute;width:200px;left:480px;">
        <ol class="rectangle-list">
            <li><a href="javascript:_loading(1)">等待框1 (loading)</a></li>
            <li><a href="javascript:_loading(2)">等待框2 (loading)</a></li>
            <li><a href="javascript:_loading(3)">等待框3 (loading)</a></li>
            <li><a href="javascript:_loading(4)">等待框4 (loading)</a></li>
            <li><a href="javascript:_loading(5)">等待框5 (loading)</a></li>
            <li><a href="javascript:_loading(6)">等待框6 (loading)</a></li>
            <!--<li><a href="javascript:_progress(1)">progress1</a></li>-->
        </ol>
    </div>
    
    <div style="position:absolute;width:200px;left:760px;">
        <ol class="rounded-list">
            <li><a href="javascript:_alert1()">提示框1 (alert)</a></li>
            <li><a href="javascript:_alert2()">提示框2 (alert)</a></li>
            <li> <a href="javascript:_confirm1()">确认框1 (confirm)</a></li>
            <li> <a href="javascript:_confirm2()">确认框2 (confirm)</a></li>
            <li> <a href="javascript:_error()">失败提示框 (error)</a></li>
            <li> <a href="javascript:_success()">成功提示框 (success)</a></li>
        </ol>
    </div>
    <script>
    function _basic() {
        zeroModal.show();
    }

    function _params() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            close: false
        });
    }

    function _escape() {
        zeroModal.show({
            title: 'hello world',
            content: '<b>this is zeroModal</b>',
            escape: false
        });
    }

    function _button() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            ok: true,
            cancel: true,
            okFn: function(opt) {
                console.log(opt);
                alert('clicked ok and not close');
                return false;
            }
        });
    }

    function _setsize() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            width: '60%',
            height: '40%'
        });
    }

    function _notoverlay() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            width: '60%',
            height: '40%',
            overlay: false
        });
    }

    function _iframe() {
        zeroModal.show({
            title: 'hello world',
            iframe: true,
            url: 'http://www.baidu.com',
            width: '80%',
            height: '80%',
            cancel: true
        });
    }

    function _esc() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            esc: true
        });
    }

    function _resize() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            width: '60%',
            height: '40%',
            resize: true
        });
    }

    function _maxmin() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            width: '60%',
            height: '40%',
            max: true,
            min: true
        });
    }

    function _loading(type) {
        zeroModal.loading(type);
    }

    function _progress() {
        zeroModal.progress();
    }

    function _alert1() {
        zeroModal.alert('请选择数据进行操作!');
    }

    function _alert2() {
        zeroModal.alert({
            content: '操作提示!',
            contentDetail: '请选择数据后再进行操作',
            okFn: function() {
                alert('ok callback');
            }
        });
    }

    function _confirm1() {
        zeroModal.confirm("确定提交审核吗？", function() {
            alert('ok');
            //return false;
        });
    }

    function _confirm2() {
        zeroModal.confirm({
            content: '确定提交审核吗？',
            contentDetail: '提交后将不能进行修改。',
            okFn: function() {
                alert('ok');
            },
            cancelFn: function() {
                alert('cancel');
            }
        });
    }

    function _error() {
        zeroModal.error('请选择数据进行操作!');

        /*zeroModal.error({
            content: '请选择数据进行操作!',
            width: '800px'
        });*/
    }

    function _success() {
        zeroModal.success('操作成功!');
    }

    function _setOpacity() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            width: '60%',
            height: '40%',
            opacity: 0.8
        });
    }

    function _drag() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            dragHandle: 'container',
            ok: true
        });
    }

    function _custombutton() {
        zeroModal.show({
            title: 'hello world',
            iframe: true,
            url: 'http://www.baidu.com',
            width: '60%',
            height: '60%',
            buttons: [{
                className: 'zeromodal-btn zeromodal-btn-primary',
                name: '这是自定义按钮',
                fn: function(opt) {
                    alert(1);
                    return false;
                }
            }, {
                className: 'zeromodal-btn zeromodal-btn-default',
                name: '取消',
                fn: function(opt) {
                    alert(2);
                }
            }]
        });
    }

    function _setPosition() {
        zeroModal.show({
            title: 'hello world',
            content: 'this is zeroModal',
            top: '30px',
            left: '30px',
            width: '280px',
            height: '600px'
        });
    }
    </script>
</body>
</html>
View Code

zeroModal稍全功能最基本接入包.rar

 

附：

zeroModal官方包.rar

jQuery源码库.zip

官网？

posted @ 2018-01-24 20:56  每天都要学一点  阅读(523)  评论(0)  编辑  收藏  举报