设置 display: none 即可
我看了下 bootstrap 的 .hidden

.hidden {
    display: none !important;
}

!important 的优先级是最高的
所以即使 layer 展示时自动将元素的 style属性 设置成 display: block也会被其覆盖掉

我一般使用layer都是保存为字符串的，如：

var $wrapper=$('<p>test</p>')
var myLayer = layer.open({
    type: 1,
    area: ['1024px','768px'],
    content: $wrapper,
    maxmin: true
});

如果一定要在页面上写可以使用script包含

<script id="test" type="template">
    <p>test</p>
</script>
var myLayer = layer.open({
    type: 1,
    area: ['1024px','768px'],
    content: $('#test'),
    maxmin: true
});

如果按题主的思路来查错，首先可以F12查看弹出框内是否有内容
<p id="grmsDetailChart" style="height:300px;"></p>
是否插入，如果没有插入说明获取元素的过程有问题；如果已经插入可以看下插入的p样式，是否受原来父元素的影响。