Question

我有div标签的HTML代码，我必须使用jQuery显示

             目录查找         除非另有说明，否则所有字段均为必填字段。

            搜索

错误填写必填字段。错误未找到结果。请再次尝试搜索。

点击此代码链接

<div class="row-fluid">
    <a href="#" id="OpenDialog24" class="inline">Directory Lookup</a>   
    </div>

我写了这个jquery的代码

$('#saveandcontinue').click(function(){
        alert("h");
         $('body').css('background', '#999');
        $('.footer').css('background', '#999');
        $('.utility-nav').css('background', '#999');    
        $('#savedialog').show("slow");         
    });
    });
    $('#close24').click(function(){
             $('body').css('background', '#fff');
            $('.utility-nav').css('background', '#fff');
            $('.footer').css('background-image','url(img/footer/footer-bg.png)');
            var text=$('#popuptext').val();         
            $('#savedialog').hide("slow");

        });

但它只是像隐藏和显示不像对话框那样显示。这是我的代码现在如何工作的示例 - http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

我想要的是你可以在这里看到 - http://jsfiddle.net/zjRga/357/

请建议我在哪里错。

Answer 1

首先不要相信w3schools显示正确的信息

如果你想使用jquery-ui库，就像小提琴用来制作浮动对话框，只需在你的页面中包含jquery-ui js文件，并使用你想要的选项调用.dialog()，{{ 3}}

$("#savedialog").dialog({
  //options would go here
});

否则如果您想在没有库的情况下进行此操作，则需要将元素位置设置为固定并设置其顶部，左侧，底部或右侧样式。

所以你可以在css中添加一个类，如下所示

.dialog {
   width:200px;
   height:200px;
   position:fixed;
   top:50%;
   left:50%;
   margin-left:-100px;
   margin-top:-100px;
}

并将其添加到元素

上的类列表中

<div id="savedialog" class="dialog"></div>

然后只需在需要时显示和隐藏元素。

您需要额外的javascript才能使其可拖动。

如何显示对话？

1 个答案: