Javascript 如何使用jquery实现按钮点击的全屏编辑器

我有一个编辑。我想让它在某些按钮点击全屏

事实上我想通过黄疸来实现编辑功能的最大化

请参阅此链接：

这个演示最大化按钮就在那里。我想使用jquery实现同样的功能。

您可以使用自定义css类实现：

.full-screen{
    z-index: 9999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
}

希望这有帮助

---

$（“#最大化”）。在（'click'，function（）上{
$（“#容器”）.toggleClass（“全屏”）；
})

。全屏{
z指数：9999；
宽度：100%；
身高：100%；
位置：固定；
排名：0；
左：0；
填充：0px；
边际：0px；
溢出x：隐藏；
}
div{
宽度：100px；
高度：100px；
背景颜色：绿色；
}

[]

除了使用JavaScript单击按钮时在其上附加（和删除）CSS类之外，您还可以使用一些CSS技巧：

#全屏切换：选中~#您的编辑器{
z指数：9999；
宽度：100%；
位置：固定；
排名：0；
底部：0；
左：0；
边际：0px；
}
#你的编辑#fslabel：：之后{
内容：“进入全屏”；
游标：指针；/*可选*/
}
#全屏切换：选中~#您的编辑器#fslabel:：after{
内容：“退出全屏”；
}
/*用于预览的样式*/
#您的编辑器{背景：绿色；填充：10px；}
#你的编辑#fslabel：：在{颜色：白色；填充：3px 5px；
边框半径：2px；边框：1px槽白色；}

---

按window.innerWidth和window.innerHeight将用户窗口的尺寸指定给容器

css:

html:

工作示例

---

链接：

有插件吗。。对于平滑的最大和最小编辑器，如CKEditor..？CKEditor还为此添加了一个名为

cke_maximized

的类以及一些额外的样式。

.container { width:200px; height:100px; background:#ccc; }

<div class='container'>
    <button class='maximize'>Maximize</button>
    <button class='minimize'>Minimize</button>
</div>

$('.maximize').on('click', function(){
    $('.container').css({'width': window.innerWidth, 'height': window.innerHeight});
});
$('.minimize').on('click', function(){
    $('.container').css({'width':'200px' , 'height': '100px'});
});