Question

我的页面是：http://www2.leicabiosystems.com/l/48532/2018-02-16/693471i

我已经在第一个＆＃34上编写了一个JS / CSS / HTML弹出窗体;下载了小册子＆＃34;按钮

<button id="popup" onclick="div_show()">Download the brochure</button>

当我点击按钮时，弹出窗体在容器中打开，按钮只能使用一次。

我的问题：

如何从容器中提取弹出窗体，使其在页面上的全宽？在叠加模式
如何在整个页面中多次使用它？因此，用户可以多次点击它，并且只要他点击它就能看到它。让他不要向上或向下滚动以检索弹出窗体。

Answer 1



     jQuery(document).ready(function($){
     
     $("#click").click(function(){
     $(".popup").show();
     });      
     });
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <style>
    .popup{position: fixed; top:35%; right: 0; bottom: 0; left: 0; z-index: 1050; display: none;  outline: 0;overflow: auto;}

    .popup .popup_width{width: 500px;}
    .popup .controls_width{width: 450px;}
    .popup .color{width: max-content; padding-bottom: 0px;margin-right: 10px;}
    .popup .removeborder{border:none;}
    .popup .footerview {display: inline-block;}
    .popup .footercontrol{list-style-type: none; display: flex; width:100%; padding: 0;}
    .popup .footercontrol li{padding-right: 10px;}
    .popup .footercontrol .dropdown-menu .delete_note{margin:auto;}
    .popup .footercontrol li:last-child{margin-left: 290px; padding: 0;}
    </style>
    <input type="submit" id="click"/>
    <div class="popup" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content popup_width">
                        <form method="post" class="" name="frm" id="existingnote">
                            <div class="modal-header removeborder">
                                <div class="form-group controls_width">
                                    <input type="text" name="title"  class="form-control" id="exsistitle">
                                </div>
                            </div>
                            <div class="modal-body removeborder">
                                <div class="form-group controls_width">
                                    <textarea name="desc" class="form-control " id="exsistxtarea" ></textarea>
                                </div>
                            </div>
                            <div class="modal-footer removeborder footerview">

                                <!--              <div class="form-group ">-->
                                <ul class="footercontrol" type="none">
                                    <li>
                                        <div class="color ">
                                            <input type='text' id="color_selecter" class="basic curr_bgcolor" />
                                        </div>
                                    </li>
                                    <li>
                                        <div class="dropdown footercontrol">
                                            <!--<i class="fas fa-ellipsis-v" style="font-size: 25px;" id="menu1" data-toggle="dropdown"></i>-->
                                            <span class="fas fa-ellipsis-v" id="menu1" data-toggle="dropdown"></span>
                                            <!--<span class="caret" id="menu1" data-toggle="dropdown"></span>-->
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                                                <li role="presentation" class="delete_note"><a href="#">Delete note</a></li>

                                            </ul>
                                        </div>
                                    </li>
                                    <!--<input type="color" name="favcolor" id="color_selecter" value="#ffffff">-->
                                    <li><input type="submit" name="title" placeholder="Title" class="form-control btn btn-primary" id="save_changes_btn" value="Done"></li>
                                </ul>
                                <!--              </div>-->
                            </div>
                        </form>
                    </div>

                </div>
            </div>




.popup{position: fixed; top:35%; right: 0; bottom: 0; left: 0; z-index: 1050; display: none;  outline: 0;overflow: auto;}

.popup .popup_width{width: 500px;}
.popup .controls_width{width: 450px;}
.popup .color{width: max-content; padding-bottom: 0px;margin-right: 10px;}
.popup .removeborder{border:none;}
.popup .footerview {display: inline-block;}
.popup .footercontrol{list-style-type: none; display: flex; width:100%; padding: 0;}
.popup .footercontrol li{padding-right: 10px;}
.popup .footercontrol .dropdown-menu .delete_note{margin:auto;}
.popup .footercontrol li:last-child{margin-left: 290px; padding: 0;}

js:
$(".popup").show();
$(".popup").hide();

JS弹出窗体与HTML表单

1 个答案: