精华内容
下载资源
问答
  • 弹出标题的jquery代码
    2021-04-19 03:26:34

    JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。

    其大致步骤为:

    •创建一个装载弹出窗口的div

    jQuery实例1:浮动窗口

    弹出窗口

    我是标题栏! X
    我是一个窗口!

    •创建相应的css文件将其显示为一个弹出窗口

    #win{

    /*边框*/

    border:1px red solid;

    /*窗口的高度和宽度*/

    width : 300px;

    height: 200px;

    /*窗口的位置*/

    position : absolute;

    top : 100px;

    left: 350px;

    /*开始时窗口不可见*/

    display : none;

    }

    /*控制背景色的样式*/

    #title{

    background-color : blue;

    color : red;

    /*控制标题栏的左内边距*/

    padding-left: 3px;

    }

    #cotent{

    padding-left : 3px;

    padding-top :  5px;

    }

    /*控制关闭按钮的位置*/

    #close{

    margin-left: 188px;

    /*当鼠标移动到X上时,出现小手的效果*/

    cursor: pointer;

    }

    •创建相应的JavaScript文件来操作窗口的显示

    function showWin(){

    /*找到div节点并返回*/

    var winNode = $("#win");

    //方法一:利用js修改css的值,实现显示效果

    // winNode.css("display", "block");

    //方法二:利用jquery的show方法,实现显示效果

    // winNode.show("slow");

    //方法三:利用jquery的fadeIn方法实现淡入

    winNode.fadeIn("slow");

    }

    function hide(){

    var winNode = $("#win");

    //方法一:修改css的值

    //winNode.css("display", "none");

    //方法二:jquery的fadeOut方式

    winNode.fadeOut("slow");

    //方法三:jquery的hide方法

    winNode.hide("slow");

    }

    更多相关内容
  • 设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、 text、id、iframe四种加载方式,通过ajax以get或post加载目标url的...
  • 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用。...
  • jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动、调整大小、及关闭;平常主要用来替代浏览嚣自带的alert、confirm、open...
  • "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
  • HTML代码 代码如下:’pop-div’ xss=removed class=”pop-box”> 标题位置</h4> ”pop-box-body”> <p> 正文内容 </p> </div> ’buttonPanel’ xss=removed xss=removed> <input value=”Close” id=”btn1″ ...
  • jQuery可拖拽对话框弹出代码,支持拖拽,自定义弹出层回调,自定义弹出层内容,标题文字等
  • tekitizy_carousel是一款jquery响应式弹出层图片画廊插件。该弹出层图片画廊可以将页面中所有带相同class类的图片制作为一个无限循环的旋转木马效果。它的特点还有: 完全响应式。 通过图片的alt标签来设置标题。 ...
  • 今天讲了Jquery弹出窗口的组成和用法:先把引用文件的代码写好:// 每个弹窗的标识var x =0;var idzt = new Array();var Window = function(config){//ID不重复idzt[x] = "zhuti"+x; //弹窗ID//初始化,接收参数...

    今天讲了Jquery的弹出窗口的组成和用法:

    先把引用文件的代码写好:

    // 每个弹窗的标识

    var x =0;

    var idzt = new Array();

    var Window = function(config){

    //ID不重复

    idzt[x] = "zhuti"+x; //弹窗ID

    //初始化,接收参数

    this.config = {

    width : config.width || 300, //宽度

    height : config.height || 200, //高度

    buttons : config.buttons || '', //默认无按钮

    title : config.title || '标题', //标题

    content : config.content || '内容', //内容

    isMask : config.isMask == false?false:config.isMask || true, //是否遮罩

    isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动

    };

    //加载弹出窗口

    var w = ($(window).width()-this.config.width)/2;

    var h = ($(window).height()-this.config.height)/2;

    var nr = "

    $("body").append(nr);

    //加载弹窗标题

    var content ="

    "+this.config.title+"
    ×
    ";

    //加载弹窗内容

    var nrh = this.config.height - 75;

    content = content+"

    "+this.config.content+"
    ";

    //加载按钮

    content = content+"

    "+this.config.buttons+"
    ";

    //将标题、内容及按钮添加进窗口

    $('#'+idzt[x]).html(content);

    //创建遮罩层

    if(this.config.isMask)

    {

    var zz = "

    $("body").append(zz);

    $("#zz").css('display','block');

    }

    //最大最小限制,以免移动到页面外

    var maxX = $(window).width()-this.config.width;

    var maxY = $(window).height()-this.config.height;

    var minX = 0,

    minY = 0;

    //窗口移动

    if(this.config.isDrag)

    {

    //鼠标移动弹出窗

    $(".title").bind("mousedown",function(e){

    var n = $(this).attr("bs"); //取标识

    //使选中的到最上层

    $(".zhuti").css("z-index",3);

    $('#'+idzt[n]).css("z-index",4);

    //取初始坐标

    var endX = 0, //移动后X坐标

    endY = 0, //移动后Y坐标

    startX = parseInt($('#'+idzt[n]).css("left")), //弹出层的初始X坐标

    startY = parseInt($('#'+idzt[n]).css("top")), //弹出层的初始Y坐标

    downX = e.clientX, //鼠标按下时,鼠标的X坐标

    downY = e.clientY; //鼠标按下时,鼠标的Y坐标

    //绑定鼠标移动事件

    $("body").bind("mousemove",function(es){

    endX = es.clientX - downX + startX; //X坐标移动

    endY = es.clientY - downY + startY; //Y坐标移动

    //最大最小限制

    if(endX > maxX)

    {

    endX = maxX;

    } else if(endX < 0)

    {

    endX = 0;

    }

    if(endY > maxY)

    {

    endY = maxY;

    } else if(endY < 0)

    {

    endY = 0;

    }

    $('#'+idzt[n]).css("top",endY+"px");

    $('#'+idzt[n]).css("left",endX+"px");

    window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本

    });

    });

    //鼠标按键抬起,释放移动事件

    $("body").bind("mouseup",function(){

    $("body").unbind("mousemove");

    });

    }

    //关闭窗口

    $(".close").click(function(){

    var m = this.getAttribute("bs"); //找标识

    $('#'+idzt[m]).remove(); //移除弹窗

    $('#zz').remove(); //移除遮罩

    })

    x++; //标识增加

    }

    这个JS文件把弹出窗口的内容,样式,位置,按钮,以及遮罩层都做了处理,在引用前好好看看里面的代码,最好都能弄懂,里面也做了详细的注释,希望可以帮的你。

    下面是CSS样式表:

    .zhuti

    {

    position:absolute;

    z-index:3;

    font-size:14px;

    border-radius:5px;

    box-shadow:0 0 5px white;

    overflow:hidden;

    color:#333;

    }

    .title

    {

    background-color:#3498db;

    vertical-align:middle;

    height:35px;

    width:100%;

    line-height:35px;

    text-indent:1em;

    }

    .close{

    float:right;

    width:35px;

    height:35px;

    font-weight:bold;

    line-height:35px;

    vertical-align:middle;

    color:white;

    font-size:18px;

    }

    .close:hover

    {

    cursor:pointer;

    }

    .content

    {

    text-indent:1em;

    padding-top:10px;

    }

    .btnx

    {

    height:30px;

    width:100%;

    text-indent:1em;

    }

    .btn

    {

    height:28px;

    width:80px;

    float:left;

    margin-left:20px;

    color:#333;

    }

    #zz

    {

    width:100%;

    height:100%;

    opacity:0.15;

    display:none;

    background-color:#ccc;

    z-index:2;

    position:absolute;

    top:0px;

    left:0px;

    }

    这个样式表把每个标签和所需要的样式都写好了,这样就能节省主要页面的代码量,并且让主页面看起来非常的整齐,如果要改,只需要在CSS样式表中修改即可,注意:不管要引用什么文件,必须把Jquery文件放在最前面!!!

    下面是主页面代码:

    无标题文档

    *{

    margin: 0px auto;

    }

    $(document).ready(function(e) {

    $('#btntc').click(function(){

    var html = "

    这是测试的弹窗
    ";

    var button ="";

    var win = new Window({

    width : 400, //宽度

    height : 300, //高度

    title : '测试弹窗', //标题

    content : html, //内容

    isMask : false, //是否遮罩

    buttons : button, //按钮

    isDrag:true, //是否移动

    });

    })

    });

    同样的,主页面里面也加了详细的注释,这样便于日后的理解,希望可以帮的自己和大家。让我们看看效果吧:

    点击弹出窗口之后的效果:

    我们可以看到每个弹出窗口都可以移动,并且可以弹出无数个窗口,如果把遮罩层改成true,那样就不能再出现第二个弹出窗口了。

    一定要记住遮罩层的实用,这样可以避免很多BUG如果要引用弹出窗口一定要测试好了再使用,以防出现问题,切记!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    展开全文
  • 内容索引:脚本资源,Ajax/JavaScript,弹出框,自动关闭 wBox ,基于jQuery1.4.2的一个弹出框插件,与其它不同的是,它可以自动关闭,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入...
  • JQ鼠标经过标题向上弹出特效是一款基于jquery+css3实现的点击左右箭头可移动左右滚动图片特效。
  • 本文实例为大家分享了jQuery实现弹出对话框的具体实现代码,供大家参考,具体内容如下 首先,这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多...
  • 内容索引:脚本资源,jQuery,弹出层,JQuery插件 JQuery 弹出层插件 PopupDiv-v1.0,弹出后可自动居中,可自定义标题栏和关闭按钮,支持半透明状态,支持鼠标拖动,支持自定义弹出样式,支持ajax加载页面到弹出层,带...
  • 这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。 [removed][removed] [removed][removed] [removed][removed] [removed][removed] [removed][removed] 'style' : 'wap',...
  • js代码 [removed][removed] [removed][removed] [removed][removed] [removed][removed] ...'title' : '', //标题 ...这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
  • 超实用的jQuery代码

    2019-03-04 10:20:41
    1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
  • 基于jQuery+CSS3点击动画弹出表单代码

    千次阅读 2021-06-13 05:33:53
    分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码。效果图如下:实现的代码。html代码:上传选择文件确定?确定删除发送js代码:$(function () {var quttonUpload = Qutton....

    分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码。效果图如下:

    b10037315c4e66390157f131fa955276.png

    实现的代码。

    html代码:

    上传

    选择文件

    确定?

    确定删除
    发送

    js代码:

    $(function () {

    var quttonUpload = Qutton.getInstance($('#qutton_upload'));

    quttonUpload.init({

    icon: 'images/icon_upload.png',

    backgroundColor: '#917466'

    });

    var quttonDelete = Qutton.getInstance($('#qutton_delete'));

    quttonDelete.init({

    icon: 'images/icon_delete.png',

    backgroundColor: "#eb1220"

    });

    var quttonComment = Qutton.getInstance($('#qutton_comment'));

    quttonComment.init({

    icon: 'images/icon_comment.png',

    backgroundColor: "#41aaf1"

    });

    });

    201603282312454295.jpg

    展开全文
  • 原理很简单,通过JS动态构建... 代码如下: <!– 背景遮盖层 –> ”dialog-overlay”></div> <!– 对话框 –> ”dialog”> ”bar”> ”title”>标题</span> [关闭]</a> </div> ”content”>内容部分</div> </d
  • jQuery可拖拽对话框弹出代码,支持拖拽,自定义弹出层回调,自定义弹出层内容,标题文字等
  • 可设置标题与内容弹出层js特效是一款jQuery弹出层插件制作的可设置标题与内容的弹框代码
  • 可设置标题与内容弹出层js特效是一款jQuery弹出层插件制作的可设置标题与内容的弹框代码
  • js代码 [removed][removed] [removed][removed] [removed][removed] [removed][removed] ...'title' : '', //标题 ... 这是一款基于jQuery兼容电脑手机端轻量级弹层组件代码,alert.js弹出层插件。
  • 内容索引:脚本资源,jQuery,弹出窗口,弹出层 一个基于jQuery弹出层,支持拖拽,支持内容为文字,图片,URL等!至于兼容性。在IE6下,弹出对像无法绝对固定。其他应该没啥大问题  参数:[可选参数在调用时可写可不...
  • jQuery 仿QQ右下角弹出消息提示,显示一个300x200的消息,显示一个fadeIn动画消息,显示一个show动画消息,显示一个show动画消息,不含html,显示定义内容和标题消息,一秒钟关闭消息。  支持鼠标over时不关闭消息...
  • 不错的jQuery弹出层对话框插件,目前几个项目都在用,调用方便很实用,方便扩展; 对话框标题可自由拖动; 边框支持多浏览器半透明; 支持半遮罩背景设置; 支持回调函数使用; 传参方便,一行代码搞定调用,希望能...
  • 今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class="e3"> ...

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。

    效果图如下:

    鼠标悬浮前:

    鼠标悬浮后:

     

    html代码如下:

    <ul class="e3">
    	<li>
            <a href="#">
                <img src="./1_131031084533_1.jpg" border="0" width="824" height="94" alt="长城外景基地">
                <span class="title" style="display: none; ">
                    <font class="font1">SHOWCASE TIME<br>长城外景基地</font>
                </span>
            </a>
        </li>
    	<li>
        	<a href="#">
            	<img src="./1_131031084327_1.jpg" border="0" width="824" height="94" alt="白鹭岛">
                <span class="title" style="display: none; ">
                	<font class="font1">SHOWCASE TIME<br>白鹭岛</font>
                </span>
           	</a>
        </li>
    </ul>
    

      

    jquery代码如下:

    <script type="text/javascript">
    $(document).ready(function(){
      $('.e3 li').mouseover(function(){
      $(this).find('.title').stop(true,true).slideDown();//you can give it a speed
      });
      $('.e3 li').mouseleave(function(){
      $(this).find('.title').stop(true,true).slideUp();
      });
      
      
    });
    </script>
    

     

    里面在slideDown和slideUp前面加 stop(true,true) 因为事件的执行有一定延迟,当快速进行把鼠标在图片上悬浮和取消悬浮的操作时,一旦停止下来,事件却没有执行完毕。加后明显改善效果。

    转载于:https://www.cnblogs.com/shanmao/p/3459833.html

    展开全文
  • jquery自定义弹窗窗

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,754
精华内容 4,301
热门标签
关键字:

弹出标题的jquery代码