0

我有一个div，

<div id="messagebox" style="display: none; cursor: default">
   <asp:DropDownList ID="ddl" runat="server" EnableViewState="true" AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"/>
</div>

在点击事件中，我正在使用这个 div 显示，

$('#messagebox').show();

我怎样才能把它放在屏幕中央并使背景灯变暗，我想下拉列表来触发后面的代码所以想禁用除这个div之外的所有东西，

4

6 回答 6

0

听起来您希望此 div 用作模态；您可以添加<div>覆盖整个背景，例如：

<div id="cover" style="position:absolute; width:100%; height:100%; background-color: #fff; display:none; "></div>

...然后通过相同的.show()方法显示它：

$('#cover').show();

您可能还需要使用z-index两者的属性来获得正确的分层。如果可以使用 jQuery UI，您还可以探索jQuery 的 Dialog 系统。

于 2013-05-09T12:20:10.207 回答
0

这本质上是一个“模态弹出功能”，也称为“暗盒”弹出。您可以使用 Javascript 或“纯 CSS”来实现“模式弹出”功能；后者即使在禁用 Javascript 的情况下也可以工作。这是作为纯 CSS3/HTML5 解决方案实现的模态弹出演示的链接（没有任何 javascripting）：http ://webinfocentral.com/html5/ModalPopUp.htm

它的基本部分利用target了如下清单所示的属性：

/*** pop-up div to cover entire area ***/
.divModalDialog  {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*! important !*/
    display:none;
    /* last attribute set darkness on scale: 0...1.0 */
    background-color:rgba(0,0,0,0.8);
    text-align:center;
    z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target  { display:block; }

有关完整的解决方案，请参阅我的文章 ( http://www.codeproject.com/Tips/170049/Pure-HTML-5-CSS-3-Modal-Dialog-Box-no-JavaScript )。

于 2013-05-09T12:22:28.810 回答
0

我会使用某种模态插件：这里有几个，很多例子。如果没有其他要求，就没有理由开发自己的一个吗？

http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html

于 2013-05-09T12:22:46.267 回答
0

您可以使用jQuery BlockUI插件来阻止屏幕，并以屏幕中心的弹出窗口形式访问所需的 div

$(document).ready(function() { 
    $('#someButton').click(function() { 
        $.blockUI({ message: $('#cover') }); 
    });
});

在这里查看演示：http: //www.malsup.com/jquery/block/#demos

于 2013-05-09T12:49:24.460 回答
0

尝试这个 ..

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height();//retrieve current window height


$('#messagebox').css('top',(windowHeight/2)+"px");
$('#messagebox').css('left',(windowHeight /2)+"px");
$('#messagebox').show();
于 2013-05-09T12:59:09.013 回答
0 
I Edited your html and added it inside tabel. Now it's working fine and always
stay in center position even on window resizing. Check below demo

http://jsfiddle.net/NnckT/9/

于 2013-05-09T12:59:18.810 回答