不使用jquery.mobile-1.4.5.min.js的jQuery弹出窗口

Question

我想使用选择列表旁边的按钮。 该按钮将显示带有记录数据网格的弹出式iframe。

当我包含'jquery.mobile-1.4.5.min.js'时，一切正常，但是当我这样做时，它会将网站的外观完全改变为移动应用程序。 是否有一种方法或其他库可以用来避免这种行为？

这是弹出窗口的样子（但移动外观不好）：

没有'jquery.mobile-1.4.5.min.js'，它看起来像这样：

任何人都可以帮我吗？

Answer 1

您可以使用javascript和css创建一个简单的灯箱。然后使用ajax将记录的数据网格加载到灯箱中。

CSS

.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 5%;
left: 5%;
width: 90%;
height: auto;
max-height: 90%;
padding: 16px;
border: 2px solid #930;
background-color: white;
z-index:1002;
overflow: auto;
}

将此添加到您的网页HTML代码

<div id="light" class="white_content"></div>
<div id="fade" class="black_overlay"></div>

进行ajax调用以在单击按钮时获取记录。这个片段会起作用。虽然你必须修改它以适合你的程序

$(document).ready(function(e) {
$(document).delegate('#btnID', 'click', function(){
    $('.white_content').html(''); //set lightbox body to blank
    $.post(url,
    {
        //data
        },
        function(data, status){
            $('.white_content').html(data);
            }).fail(function(){
                $('.white_content').html('Loading failed')
                });
    });
});

Answer 2

使用jQuery-ui库解决。

仍然需要研究Bootstrap菜单不会覆盖iFrame的问题... 现在我把iFrame完全放在了菜单上。 （我猜想会有一些与z-index有关的事情）