用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>

JavaScript：用JS实现加载页面前弹出模态框的更多相关文章

  1. yii 页面加载完成后弹出模态框

    <?php $js = <<<JS $('#page-modal').modal('show');//页面加载完显示模态框 $('.modal-dialog').css('wi ...

  2. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  3. js在关闭页面前弹出确认提示【转载】

    最近项目中出现个bug,就是导出数据后,会提示确认导航,其实实际需求并不需要这个提示,可能是之前遗留的问题.查了下资料是在触发了onbeforeunload事件,那么剩下的就是代码组织问题了. 众所周 ...

  4. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  5. bootstrap弹出模态框会给body加padding的解决方法

    bootstrap弹出模态框会给body加padding,导致页面缩放的解决方法: 在页面或是css文件里加上($paddingSize为less变量,需要改成像素或是其他单位,如12px,1rem) ...

  6. 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

    Vue离开当前页面时弹出确认框实现 1. 实现目的 在某种业务场景下,用户不允许跳转到其他页面.于是,需要在用户误操作或者是点击浏览器跳转时提示用户. 2. 实现原理 使用路由守卫beforeRout ...

  7. iOS bug 之 H5 页面没有弹出提示框

    描述:在安卓上有提示框,但是在iOS上没有提示框. step 1: 失误,是我没有在正确的位置设置网址. step 2: 修改之后,测试页能弹出提示框,但是正式的页面没有提示框. step 3: 我输 ...

  8. EasyUI 解决Js动态加载页面样式不显示问题

    var strHtml = "<input name='mydate' class='easyui-datebox'>"; 直接使用append把内容加载到页面中,Ea ...

  9. 基于layer封装的异步加载分部视图弹出层

    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...

随机推荐

  1. NFS CIFS SAMBA 的联系和区别

    Common Internet File System, CIFS Server Message Block, SMB Network File System, NFS 在早期网络世界当中,档案数据在 ...

  2. C++ Jsoncpp源代码编译与解析Json

    1.Json 数据表示方式介绍 这个可以看之前的一个文章里面有说明:Java解析(读取)Json数据 2.C++ Jsoncpp 2.1 Jsoncpp介绍 (1)JsonCpp主要包含三种类型的cl ...

  3. Linux C Socket编程原理及简单实例

    部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1.   什么是TCP/IP.UDP? 2.   Socket在哪里 ...

  4. 解决报错"Your security system have blocked an application with expired or not yet valid certificate from running"

    方法如下: Go to Control Panel Java in the Security tab click the "Edit Site List-" button clic ...

  5. MSSQL工作中常用的小技巧

    大概看了一下有接近二十天自己没有写博客了,一来是因为国庆之前公司工作总会比较繁杂一点,国庆自己也需要休息,二来是因为学习一些新的东西,公司写了一天SQL回家看了看以前的笔记,感觉还挺不错,贴出来供大家 ...

  6. MySql的入侵测试以及防范

    在做了之前的SQL SERVER之后,便很想尝试一下MYSQL的入侵测试已经防范,与大家一起分享. 总的来说,我一直在用的是MYSQL,对MYSQL比较熟悉,相比较而言,感觉MYSQL更安全,这只是我 ...

  7. 【Python】Django数据模型、级联删除、级联更新、ER图导出等

    在本文中,我们将向读者详细介绍如何在更新和删除父表数据的同时,触发有关子表数据的级联更新和删除操作.您将看到当使用InnoDB表的时候,借助于外键约束就可以轻松搞定这一过程. 一.利用外键约束更新并删 ...

  8. [Javascript] Create Objects

    var vehicle1 = {type: "Motorboat", capacity: 6, storedAt: "Ammunition Depot"}; v ...

  9. B. Ohana Cleans Up（Codeforces Round #309 (Div. 2)）

    B. Ohana Cleans Up   Ohana Matsumae is trying to clean a room, which is divided up into an n by n gr ...

  10. 使用(function() {}).call(this);包裹代码有什么好处，什么时候应该这样做？

    转自:http://segmentfault.com/q/1010000002519489 1.严格模式下函数调用的 this 并不会默认成为全局对象. 使用 func.call(this) 确保函数 ...