<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
   <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        #more{
            text-decoration: none;
            color: deepskyblue;
            cursor: pointer;
        }
        #div{
            z-index: 19891016;
            width: 360px;
            height: 240px;
            top: 30.5px;
            left: 400px;
            margin: 0;
            padding: 0;
            background-color: #ffffff;
            box-shadow: rgba(0, 0, 0, 0.298039) 1px 1px 50px;
            border-radius:3px;
            display: none;
        }
        #close{
            padding:11px;
            width: 40px;
            height: 20px;
            cursor: pointer;
            float: right;
            color: #000;
            display: block;
        }
        #shade {
            z-index: 19891015;
            background-color: #bdbdbd;
            top: 0px;
            left: 0px;
            width: 100%;   
            height: 100%;   
            position: fixed;
            display: none;
        }
        #shade,  #div {
            position: fixed;
            pointer-events: auto;
        }
    
    </style>
    <body>
        <a id="more" onclick="showDiv('ssddddddddd');" >查看更多 </a>
        <div id="shade" >
            <div id="div" class="layui-layer layer-anim" times="2" showtime="0"  >
                <span id="close" style="color:#000;" onclick="hideDiv();">
                    关闭
                </span>
                </br>
                <p id="content" style="color:#000; padding:15px;"> </p>
            </div>
        </div>
    </body>
    <script>
       function showDiv(content) {   
            $('#shade').css('display','block'); 
            $('#div').css('display','block'); 
            $('#content').html(content);               
        }   
        function hideDiv(div_id) {   
            $('#shade').css('display','none'); 
            $('#div').css('display','none'); 
            $('#content').html('');
        }
    </script>
<html>

<pre>内容换行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<pre style="width:500px; overflow:hidden">此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示新此处显示
新 Div preprepr
epreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepreprepre</pre>
</body>
</html>

pasting

jquery 弹出层的更多相关文章

  1. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  5. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  6. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  7. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  8. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  9. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

  10. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

随机推荐

  1. angularjs应用骨架

    使用典型的类库时,你可以选择并使用你所喜欢的功能:而对于angularjs框架来说,必须把它看成一个完整的套件来使用,框架中的所有的东西都包含在里面,接下来将会介绍angular的基础模块,这样你就可 ...

  2. 原始的JDBC操作

    -----------------------------根据配置文件---------------------------- package cn.gdpe.jdbc; import java.io ...

  3. 11-17的学习总结(DOMfirstday)

    HTML: 超文本标记语言,专门定义网页内容的语言 XHTML: 严格的HTML标准 DHTML: 所有实现网页动态效果技术的统称 XML: 可扩展的标记语言,标签都是自定义的 XML语法和HTML语 ...

  4. yii2源码学习笔记(九）

    Application是所有应用程序类的基类,接下来了解一下它的源码.yii2\base\Application.php. <?php /** * @link http://www.yiifra ...

  5. 软件测试software testing summarize

    软件测试(英语:software testing),描述一种用来促进鉴定软件的正确性.完整性.安全性和质量的过程.软件测试的经典定义是:在规定的条件下对程序进行操作,以发现程序错误,衡量软件质量,并对 ...

  6. double类型字符串转换成一个纯数字字符串和一个小数点位数的c++代码

    今天工作中遇到一个要不一个double型的字符串转换成一个纯字数字符串和一个标志这个数字字符串的小数点有几位的int类型 例如:“23.123”--->“23123” + 3   比较简单.就是 ...

  7. [转]hive中order by,distribute by,sort by,cluster by

    转至http://my.oschina.net/repine/blog/296562 order by,distribute by,sort by,cluster by  查询使用说明 1 2 3 4 ...

  8. js compress and combine

    http://www.cnblogs.com/snandy/archive/2012/06/08/2541827.html http://developer.51cto.com/art/201301/ ...

  9. Swift入门系列--Swift官方文档（2.2）--中文翻译--About Swift 关于Swift

    About Swift 关于Swift 官方文档的翻译,仅供参考,本人英语本就不好,边学边翻译,不喜勿喷. Swift is a new programming language for iOS, O ...

  10. mac下设置命令别名

    项目使用了gerrit,每次push代码都需要执行 git push origin HEAD:refs/for/master 为了简便,使用了alias命令来控制台下使用下面的命令简化了提交. ali ...