当前位置：首页 → 问答吧 → 弹出对话框如何写！

弹出对话框如何写！

时间：2009-08-17

来源：互联网

哎，这个东西我不晓得怎么描述，我就把我要的效果发给大家看一下吧。

http://qun.qq.com/air/#search/clt/1/tx/jquery/txff/jquery

然后点击一下“申请加入”
之后就弹出这样的对话框了，这样效果用JQUERY怎么来写哩，往各位高手们指点一下。。。谢谢

作者: hongzh426 发布时间: 2009-08-17

请你参考jquery-ui

很经典，里面有一个控件叫dialog，就是你需要的实现。

作者: jerry.yan.mj 发布时间: 2009-08-20

呵呵，在官网的插件里好像就有

作者: marchhou 发布时间: 2009-08-22

添加ui.dialog控件代码：
  var deleteDialog = function(title, message, callback)
{
  $('#dialog').attr('title', title);
  $('#dialog > p').html(message);
  $('#dialog').dialog({
   autoOpen: false,
   width: 400,
   resizable: false,
   modal: true,
   overlay: { opacity: 0.5, background: "black" },
   buttons: {
    "关闭": function() {
     callback.call();
     $(this).dialog("close");
    }
   }
  });
  $('#dialog').dialog('open');
}

<div id="dialog" title="提示信息" class="flora">
            <p  style="text-align:left"></p>
         </div>

作者: kliantao 发布时间: 2009-08-25

其实用js也可以实现

作者: xiell 发布时间: 2009-08-27

可以自定义表现形式！
其实很简单，插件用多了会对jquery产生技术细节盲点的！下面的代码简单的很。
－－－－－－
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>test</title>

    <script type="text/javascript" src="../Common/Js/jquery-1.3.2.js"></script>

    <style type="text/css">
        .pop-box {
            z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
            margin-bottom: 3px;
            display: none;
            position: absolute;
            background: #FFF;
            border:solid 1px #6e8bde;
        }

        .pop-box h4 {
            color: #FFF;
            cursor:default;
            height: 18px;
            font-size: 14px;
            font-weight:bold;
            text-align: left;
            padding-left: 8px;
            padding-top: 4px;
            padding-bottom: 2px;
            background: url("../images/header_bg.gif") repeat-x 0 0;
        }

        .pop-box-body {
            clear: both;
            margin: 4px;
            padding: 2px;
        }


        .mask {
            color:#C7EDCC;
            background-color:#C7EDCC;
            position:absolute;
            top:0px;
            left:0px;
            filter: Alpha(Opacity=60);
        }
    </style>

    <script type="text/javascript">
    function popupDiv(div_id)
    {
        var div_obj = $("#"+div_id);
        var windowWidth = document.body.clientWidth;
        var windowHeight = document.body.clientHeight;
        var popupHeight = div_obj.height();
        var popupWidth = div_obj.width();

        //添加并显示遮罩层
//        $("<div id='mask'></div>").addClass("mask")
//                                  .width(windowWidth + document.body.scrollWidth)
//                                  .height(windowHeight + document.body.scrollHeight)
//                                  .click(function() {hideDiv(div_id); })
//                                  .appendTo("body")
//                                  .fadeIn(200);
        //显示层，可以自定义层
        div_obj.css({"position": "absolute"})
               .animate({left: windowWidth/2-popupWidth/2,
                         top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");
    }

    function hideDiv(div_id) {
        $("#mask").remove();
        $("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div id='pop-div' style="width: 300px;" class="pop-box">
            <h4>
                标题位置</h4>
            <div class="pop-box-body">
                <p>
                    正文内容
                </p>
                <input id="btnClose" type="button" onclick="hideDiv('pop-div');" value="关闭" />
            </div>
        </div>
        <input type="button" id="btnTest" value='test' onclick="popupDiv('pop-div');" />
        <select id="slt">
            <option value="1">1</option>
        </select>
    </form>
</body>
</html>

作者: fengmq 发布时间: 2009-09-27

插件是用来学习。我们也不能太依赖插件。这样自己永远用的都是别人的成果。自己懂得的还是那么多。
顶一下，楼上的...

作者: dotnet201 发布时间: 2009-10-17