目前系统提供的公共弹窗方法，需要将弹窗单独组态为一个HMI页面，然后通过主界面调用open2Panel方法实现弹窗的效果，这里有两个点，一是需要单独制作HMI页面，二是往往主界面在弹窗的时候需要传输一些参数。

而有一些情况下，需要弹出的弹窗是一个非常简单的弹窗，并且不需要多处使用，或者仅需要在本页内多处使用，那么就没有必要去单独创建一个HMI页，在主页上即可简单的实现一个弹窗的功能，并且弹窗可以被鼠标拖动。

1、自制弹窗步骤

1.1在主界面上创建好一个弹窗

首先弹窗是一个面板，用Panel控件来当做面板，然后将弹窗里的元素放在Panel上，即每个元素的panelId绑定好这个面板的Panel控件。

截图示例中的Panel面板，id为p1，所以它上面的元素，均配置了panelId为p1，来实现与面板的依附关系。

1）将Panel面板拖放到页面不影响主界面其他元素的位置，随意放在哪里都可以，并设置为隐藏，这样在运行的时候，它默认是看不到的，只有触发弹窗的时候它才会显示出来；

2）在Panel面板的类名中添加“drag”；

3）增加触发脚本，一般为按钮点击，以下为按钮点击的示例脚本：

//让弹窗显示
$("#p1").show();

//让弹窗贴近点击按钮的位置
var x=$(this).css("left");
var y=$(this).css("top");
$("#p1").css("left",x).css("top",y);

优点：

1）适合通用弹窗，或公用弹窗，即在页面中或不同的页面中，均可调用，通过传参方式来让公共弹窗显示不同的内容，这样实现了弹窗的一次制作，得到重复的利用，节省了组态时间，提升效率；

2）适合比较大型的比较复杂的弹窗，如果弹窗的内容元素很多或者页面很大，并且掺杂大量的逻辑关系，则将弹窗单独建立一个HMI页面，更便于后期的维护，避免与主界面混合在一起，会造成内容的遮挡，看着也比较混乱，组态起来会非常的麻烦。

缺点：

1）会造成HMI页面增多，后期可能会增加查找的难度；

2）单独建立的HMI页面，在查询或者调用主界面的数据时，往往需要从主界面传输一些参数方式来实现，并且一些动态数据，是在获取到传参后再通过接口继续去请求数据，而不能直接从主界面获取到现有的数据，所以从效率上会相对低一些，存在数据显示上的延迟；

3）系统提供的弹窗已经固定了风格，不熟悉高阶脚本无法进行修改。

优点：

1）弹窗元素少，制作简单，不需要单多维护一个HMI页面；

2）获取数据比较方便，可以直接从主界面获取到想要的数据，减少了传参和重复请求数据的环节和时间；

3）由于是自定义的弹窗，所以风格可以很方便的根据自己的设计想法进行调整，个性化很强。

缺点：

1）仅支持在本页使用，无法跨页重复利用；

2）近适合特别简单的弹窗，元素多了会导致页面混乱不好组态和维护。