<div id="modal-content" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="width: 600px;">
        <div class="pop_tit">
            <span class="fl">时间轴</span>

            <div class="w_func fr">
                <a href="javascript:;" title="关闭" class="w_func_close" data-dismiss="modal"></a>
            </div>
        </div>
        <div id="historyFrame" style="width: 598px;height: 480px">

            <div class="wrapper">
                <div style="width: 600px;height: 480px;">
                    <!--选择时间轴数量-->
                    <div class="test_temp" id="sel_time" style="border: none;width: 600px;height: 480px;">
                        <div class="test_temp_tip" style="height: 43px;">
                            <input type="text" class="add_answer history_title" placeholder="请输入标题">
                        </div>
                        <div class="tst_temp_step timeline">
                            <div class="card_amount">
                                <label>时间点数量：</label>
                                <select id="list_time">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3" selected>3</option>
                                    <option value="4">4</option>
                                    <option value="5">5</option>
                                    <option value="6">6</option>
                                    <option value="7">7</option>
                                    <option value="8">8</option>
                                    <option value="9">9</option>
                                    <option value="10">10</option>
                                </select>
                            </div>
                            <div class="timeline_box" id="times_list">
                                <ul class="timeline_list timeline_list2" id="time_sort">
                                    <li>
                                                                <span class="timeline_circle">
                                        <a href="javascript:void(0)"></a>
                                      <div class="timeline_input">
                                          <input type="text" class="time_item" placeholder="输入时间">
                                      </div>
                                    </span>
                                    </li>
                                    <li>
                                                                <span class="timeline_circle">
                                        <a href="javascript:void(0)"></a>
                                        <div class="timeline_input">
                                            <input type="text" class="time_item" placeholder="输入时间">
                                        </div>
                                    </span>
                                    </li>
                                    <li>
                                                                <span class="timeline_circle">
                                        <a href="javascript:void(0)"></a>
                                        <div class="timeline_input">
                                            <input type="text" class="time_item" placeholder="输入时间">
                                        </div>
                                    </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--编辑时间轴-->
                    <div class="test_temp" id="edit_time"
                         style="display: none;border: none;width: 600px;height: 480px;">
                        <div class="test_temp_tip" style="height: 43px;">
                            <input type="text" class="add_answer history_title" placeholder="请输入标题">
                        </div>
                        <div class="tst_temp_step timeline">
                            <div class="timeline_box clearfix">
                                <div id="edit_times_list">
                                    <ul class="timeline_list timeline_list3">
                                    </ul>
                                </div>
                                <div class="timeline_func fr">
                                    <div class="timeline_add_img add_time_img">
                                        <a href="javascript:;" class="btn_timeline_add" title="点击添加图片">
                                            <img src="./editor/assert/images/btn_gallery_add.jpg" id="selectHistoryImg"
                                                 alt=""/>
                                        </a>
                                    </div>
                                    <div class="timeline_add_text">
                                        <input type="text" id="itemTitle" class="add_answer" placeholder="请输入标题"/>
                                    </div>
                                    <div class="timeline_add_tear">
                                        <div id="itemText">请输入内容</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--预览时间轴-->
                    <div class="test_temp" id="preview_time"
                         style="display: none;border: none;width: 600px;height: 480px;">
                        <div class="test_temp_tip" style="height: 43px;background: -webkit-linear-gradient(top, #f9f9f9, #e7e7e7);border-bottom: 1px solid #a6a7a6;font-size: 18px;font-weight: bold;font-family: microsoft yahei;color: #222;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" id="pre_history_title">
                        </div>
                        <div class="tst_temp_step timeline">
                            <div class="timeline_box clearfix">
                                <!--横向-->
                                <div id="pre_history_x" style="display: none">
                                    <div class="timeline_func fr" style="margin-top: 0;margin-right: 140px;">
                                        <div class="timeline_add_img">
                                            <a href="javascript:;" class="btn_timeline_add" title="点击添加图片">
                                                <img src="./editor/assert/images/btn_gallery_add.jpg"
                                                     id="preview_first_img_x" alt=""/>
                                            </a>
                                        </div>
                                        <div class="timeline_add_text" id="preview_first_title_x"
                                             style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 300px;">
                                        </div>
                                        <div class="timeline_add_tear">
                                            <div id="preview_first_text_x"></div>
                                        </div>
                                    </div>
                                    <div style="clear: both"></div>
                                    <div style="border-top: 1px solid #d2d2d2;margin-top: 10px"></div>
                                    <div id="preview_times_list_x">
                                        <ul>
                                        </ul>
                                    </div>
                                </div>
                                <!--纵向-->
                                <div id="pre_history_y">
                                    <div id="preview_times_list_y">
                                        <ul class="timeline_list timeline_list3">
                                        </ul>
                                    </div>
                                    <div class="timeline_func fr">
                                        <div class="timeline_add_img">
                                            <a href="javascript:;" class="btn_timeline_add" title="点击添加图片">
                                                <img src="./editor/assert/images/btn_gallery_add.jpg"
                                                     id="preview_first_img_y" alt=""/>
                                            </a>
                                        </div>
                                        <div class="timeline_add_text" id="preview_first_title_y"
                                             style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 300px;">
                                        </div>
                                        <div class="timeline_add_tear">
                                            <div id="preview_first_text_y"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pop_btn_box" id="btn_bar1">
            <a href="javascript:;" class="pop_btn fr mrmt" id="next_step"><span class="pop_btn_s2">下一步</span></a>
            <a href="javascript:;" class="pop_btn fl mrmt" id="btn_yangshi"><span class="pop_btn_s2">导入样例</span></a>
        </div>
        <div class="pop_btn_box" id="btn_bar2" style="display: none">
            <a href="javascript:;" class="pop_btn fr mrmt" id="btn_end"><span class="pop_btn_s2">预览</span></a>
            <a href="javascript:;" class="pop_btn fl mrmt" id="pre_step"><span class="pop_btn_s2">上一步</span></a>
            <a href="javascript:;" class="pop_btn mrmt" id="btn_x"><span class="pop_btn_s2">横向</span></a>
            <a href="javascript:;" class="pop_btn mrmt pop_btn_avtive" id="btn_y"><span class="pop_btn_s2">纵向</span></a>
        </div>
        <div class="pop_btn_box" id="btn_bar3" style="display: none">
            <a href="javascript:;" class="pop_btn fr mrmt" id="btn_complete"><span class="pop_btn_s2">完成</span></a>
            <a href="javascript:;" class="pop_btn fl mrmt" id="pre_step_one"><span class="pop_btn_s2">上一步</span></a>
        </div>
    </div>
</div>
