| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <link rel="stylesheet" href="./moveitem.css">
- </head>
- <body>
- <button onclick="openMoveItem()">克隆所有，在body元素中插入它们</button>
- <div id="moveitem" class="myMoveItem" style="top:10px;left:10px;">
- <div class="moveItem_header">
- <p class="moveItem_title" onselectstart="return false">标题1</p>
- <div class="moveItem_oper">
- <button type="button" class="moveItem_fullScreen"><></button>
- <button type="button" class="moveItem_normalScreen">><</button>
- <button type="button" class="moveItem_close">X</button>
- </div>
- </div>
- <div id="moveItem_body" class="moveItem_body" style="background-color: #FFF;height: calc(100% - 57px);">
- <p>测试1</p>
- </div>
- <span class="moveItem_resize"></span>
- </div>
-
- <div class="myMoveItem" style="top:150px;left:180px">
- <div class="moveItem_header">
- <p class="moveItem_title" onselectstart="return false">标题2</p>
- <div class="moveItem_oper">
- <button type="button" class="moveItem_fullScreen"><></button>
- <button type="button" class="moveItem_normalScreen">><</button>
- <button type="button" class="moveItem_close">X</button>
- </div>
- </div>
- <div class="moveItem_body">
- <p>测试2</p>
- </div>
- <div class="moveItem_footer">
- <button type="button" class="moveItem_do">确定</button>
- <button type="button" class="moveItem_cancel">取消</button>
- </div>
- <span class="moveItem_resize"></span>
- </div>
- </body>
- <script>
- function openMoveItem(){
- $("#moveItem_body").append("<p> 增加内容 </p>")
- $("#moveitem").show()
- }
- </script>
- </html>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
- <script src="./moveitem.js" type="text/javascript" charset="utf-8"></script>
|
