<div id="modal-content" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="width: 620px;">
        <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="flipcardFrame" style="width: 620px;height: 450px;background: white;">
            <div class="wrapper">
                <div>
                    <!--编辑翻翻卡-->
                    <div class="test_temp" id="edit_flipcard" style="width:620px;border: none;border: none;box-shadow: none;">
                        <div class="test_temp_tip" style=" height: 43px;">
                            <input type="text" class="add_answer flip_title" placeholder="请输入标题" style="cursor: auto;width: 470px">
                        </div>

                        <div class="tst_temp_step tst_temp_step2">
                            <div class="card_amount">
                                翻翻卡数量：
                                <select id="list_num">
                                    <option value="1">1</option>
                                    <option selected value="2">2</option>
                                    <option value="3">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>
                                </select>
                            </div>

                            <ul class="card_list3 clearfix" style="font-size: 16px;font-family: sans-serif;">
                                <li>
                                    <h5>正面</h5>
                                    <span id="tst_edit_span_front"></span>
                                    <div style="position: absolute;top: 43px;left: 14px; width: 148px;height: 115px;display: block;"
                                         class="front_add_pop">
                                        <a href="javascript:void(0);" class="card_list3_text" id="front_add_text"
                                           title="文字">
                                            <img src="share/assert/style/pop/images/card_list3_text.png" alt="">
                                        </a>
                                        <a href="javascript:void(0);" class="card_list3_img" id="front_add_img"
                                           title="图片">
                                            <img src="share/assert/style/pop/images/card_list3_img.png" alt="">
                                        </a>
                                    </div>
                                    <a href="javascript:void(0)" class="graph_list_close" style="top: 17px;display: block"></a>
                                </li>
                                <li>
                                    <h5>反面</h5>
                                    <span id="tst_edit_span_back"></span>
                                    <div style="position: absolute;top: 43px;left: 14px; width: 148px;height: 115px;display: block;"
                                         class="back_add_pop">
                                        <a href="javascript:void(0);" class="card_list3_text" id="back_add_text"
                                           title="文字">
                                            <img src="share/assert/style/pop/images/card_list3_text.png" alt="">
                                        </a>
                                        <a href="javascript:void(0);" class="card_list3_img" id="back_add_img"
                                           title="图片">
                                            <img src="share/assert/style/pop/images/card_list3_img.png" alt="">
                                        </a>
                                    </div>

                                    <a href="javascript:void(0)" class="graph_list_close" style="top: 17px;display: none"></a>
                                </li>
                            </ul>
                        </div>

                        <div class="card_list4_warp relative">
                            <div id="btn_selcard">
                                <ul class="card_list4">
                                    <li class="current">卡1</li>
                                    <li>卡2</li>
                                </ul>
                            </div>
                            <div class="arrow_box clearfix card_list4_fy">
                                <a href="javascript:;" title="下一个" class="arrow_next fr" id="btn_card_next"></a>
                                <a href="javascript:;" title="上一个" class="arrow_prev fl" id="btn_card_pre"></a>
                            </div>
                        </div>

                    </div>

                    <!--预览翻翻卡页面-->
                    <div class="test_temp" id="preview_flipcard" style="width:620px;display: none;border: none;box-shadow: none;overflow: hidden">
                        <div class="test_temp_tip" id="preview_flip_title" 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;">
                        </div>
                        <div class="test_card_list">
                            <table id="pre_card_list">
                            </table>
                        </div>
                    </div>

                    <!--排序翻翻卡页面-->
                    <div class="test_temp" id="sort_flipcard" style="width:620px;display: none;box-shadow: none;border: none;">
                        <div id="sort_html_ul"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="pop_btn_box" id="btn_bar1" style="display: none">
            <a href="javascript:void(0);" class="pop_btn fr mrmt" id="btn_sort_end"><span class="pop_btn_s2">完成排序</span></a>
        </div>
        <div class="pop_btn_box" id="btn_bar2">
            <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="btn_yangshi"><span class="pop_btn_s2">导入样例</span></a>
            <a href="javascript:;" class="pop_btn mrmt" id="btn_del"><span class="pop_btn_s2">删除翻翻卡</span></a>
            <a href="javascript:;" class="pop_btn mrmt" id="btn_sort"><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>
