jQuery的模态弹出到屏幕

我使用下面的jQuery代码来在MVC 3的动作jQuery的模态弹出到屏幕

行动打开点击一个模式弹出

@Html.ActionLink("Change", "Settings", "Account", null, new { @class = "openDialog", data_dialog_id = "newPostDialog", data_dialog_title = "Change" })

jQuery的中心显示

 $(document).ready(function() { 
     $(".openDialog").live("click", function (e) { 
      e.preventDefault(); 

      $("<div></div>") 
       .addClass("dialog") 
       .attr("id", $(this) 
       .attr("data-dialog-id")) 
       .appendTo("body") 
       .dialog({ 
        title: $(this).attr("data-dialog-title"), 
        close: function() { $(this).remove() }, 
        modal: true, 
        width:1020 

       }) 
       .load(this.href); 
     }); 

     $(".close").live("click", function (e) { 
      e.preventDefault(); 
      $(this).closest(".dialog").dialog("close"); 
     }); 
    });

问题

我不能来定位我的模态弹出屏幕的中心或与屏幕的顶部对齐。

我已经试过这一点，但不起作用。

dialog({ 
      title: $(this).attr("data-dialog-title"), 
      close: function() { $(this).remove() }, 
      modal: true, 
      width:1020, 
      top:0, 
      left:10 


     })

作为一个天真的jquery，我无法找到解决方案。任何人都可以请指导我这样做。

的style=display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 1020px; top: 394px; left: 439px;默认风格automaically加入，我只是想改变top

来源

2012-07-30 Yasser

奇怪加入height值的伎俩，这里是我曾经用过

$(document).ready(function() { 
    $(".openDialog").live("click", function (e) { 
     e.preventDefault(); 

     $("<div></div>") 
      .addClass("dialog") 
      .attr("id", $(this) 
      .attr("data-dialog-id")) 
      .appendTo("body") 
      .dialog({ 
       title: $(this).attr("data-dialog-title"), 
       close: function() { $(this).remove() }, 
       modal: true, 
       height:860, 
       width:900, 
       left:0 

      }) 
      .load(this.href); 
    });

来源

2012-07-30 07:55:09 Yasser

尝试打开后，将其定位。

dialog({ 
      title: $(this).attr("data-dialog-title"), 
      close: function() { $(this).remove() }, 
      open: function() {$(".selector").dialog("option", "position", "center");}, 
      modal: true, 
      width:1020, 
      top:0, 
      left:10 


     })

来源

2012-07-30 06:22:58

我有点新的jQuery语法，你能告诉我在哪里添加这个请.. – Yasser 2012-07-30 06:30:59

试过这个，没有工作.. – Yasser 2012-07-30 07:42:52

你可以用一点点CSS来解决这个问题。

让我们假设你的HTML的结构是类似以下内容：

<div id="modal-container"><div id="modal-dialog"></div></div>

#modal-container { position: fixed; width: 100%; height: 100%; } 
#modal-dialog { width: 1020px; margin: auto; }

从本质上说，你只是想position: fixed只是HTML文档正文的根目录下的容器。通过这种方式，容器的宽度和高度将等于窗口的宽度和高度。这里面，设置对话框的宽度和margin: auto将确保其水平居中，因为它是基于整个窗口的宽度自动设置其利润率。

来源

2012-07-30 06:23:33 rybosome

我的主div是自动添加这个'style = display：block; z-index：1002;大纲：0px无;位置：绝对;身高：自动;宽度：1020px;顶部：394px; left：439px;'，所以我给的任何样式都被覆盖 – Yasser 2012-07-30 06:26:28

阿拉法特，

只有两个属性中没有我敢肯定：

.dialog({ 
    title: $(this).attr("data-dialog-title"), 
    close: function() { $(this).remove() }, 
    modal: true, 
    width: 1020, 
    height: 800, 
    position: 'center' 
});

应该工作我认为。

来源

2012-07-30 09:54:43

hey @jim我已经有了这个工作，请看[this]（http://stackoverflow.com/a/11717427/1182982）谢谢！ – Yasser 2012-07-30 10:14:55

doh - 刚才看到了，不用担心:-) – 2012-07-30 10:23:03

我有一个类似的问题，两个原因的中心不是为我工作...

第一次围绕我不包括位置javascript库/类，所以尽管所有的代码是正确的，我不得不手动设置高度，直到我意识到jquery.ui.position失踪

我后整理出来，它是正确的居中，但该网页表现出来，我看不到模式，发生了什么事是我的链接重定向页面本身和滚动，在dialog{}功能的末尾添加return false;解决了它。

来源

2012-12-13 00:31:40 Daniel

jQuery的模态弹出到屏幕

回答

相关问题