Question

我希望在Jquery Mobile中创建一个弹出窗口，其中嵌入了一个画布。

诀窍是我需要弹出/空洞以横向模式启动..无论屏幕的当前方向如何？

有什么建议吗？

由于

Answer 1

当您检测到设备处于纵向模式时，您可以对弹出内容使用CSS变换将其旋转90度。

创建一个执行旋转的CSS类（逆时针为-90，顺时针为90）：

.rotateCCW {
    -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg);
}

然后在弹出的popupbeforeposition事件中，检查方向并添加或删除CSS类：

$("#popupDialog").on("popupbeforeposition", function(event, ui) {
    if (is_landscape()){
        $("#popupDialog").removeClass("rotateCCW");
    } else {
        $("#popupDialog").addClass("rotateCCW");            
    }    
});

function is_landscape() {
  return (window.orientation === 90 || window.orientation === -90);
}

这是 DEMO

带有画布的JQuery Mobile Popup

1 个答案: