JavaScript：用JS實現加載頁面前彈出模態框

本文轉載自查看原文 2016-05-11 21:36 18118 前端/ HTML+CSS+JavaScript

用JS實現加載頁面前彈出模態框

主要的JavaScript 代碼是：

<script>
         //加載模態框
         $('#myModal').modal();
         
         $(document).ready(function () {
             $("#select").bind("change",function(){
                 if($(this).val()==0){
                     return;
                 }
                 else{
                     $("p").text($(this).val());
                 }
             });
         });
         //選擇觸發事件
        function goUrl(obj){
            location.href=obj.value;
        }
    </script>

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <title>普通管理員-出庫登記</title>
</head>
<body>
        <!-- 模態框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            請選擇出庫類型
                        </h4>
                    </div>
                    <div class="modal-body">
                        出庫類型是：
                        <select id="select" onchange="goUrl(this.options[this.selectedIndex])">
                            <option value="0">請選擇</option>
                            <option value="comAdmin_in_purchase.html">借用</option>
                            <option value="comAdmin_in_return.html">領用</option>
                            <option value="comAdmin_in_gain.html">贈與</option>
                        </select>

                    </div>
                    <div class="modal-footer">

                        <div id="thediv" align="left">你選擇的出庫類型是：<p></p></div>
                        <button type="button" class="btn btn-default"
                                data-dismiss="modal">關閉
                        </button>
                        <button type="button" class="btn btn-primary">
                           確定
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
         //加載模態框
         $('#myModal').modal();
         
         $(document).ready(function () {
             $("#select").bind("change",function(){
                 if($(this).val()==0){
                     return;
                 }
                 else{
                     $("p").text($(this).val());
                 }
             });
         });
         //選擇觸發事件
        function goUrl(obj){
            location.href=obj.value;
        }
    </script>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js 實例2 實現模態框彈出； Js實例——模態框彈出層原生js模態框實現關閉頁面前js提示 bootstrap table 第一彈：實現模態框彈出編輯小程序之點擊圖片跳轉並且跳轉頁面有返回按鈕／點擊圖片彈出模態框 jquery實現模態框 jQuery制作彈出窗（模態框） bootstrap中的模態框（modal，彈出層）做一個vue模態彈出框如何