用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. 【BZOJ】【2750】【HAOI2012】Road

    最短路+拓扑序DP orz zyf & lyd 统计每条边在多少条最短路径上……其实可以统计 有多少条最短路径经过了x,以及y出发到达任意一个结束点有多少种走法(沿最短路) 我们可以用Dijk ...

  2. UI_UITabBarController

    建立控制器 // 普通控制器 GroupViewController *groupVC = [[GroupViewController alloc] init]; SecondViewControll ...

  3. Informatica 常用组件Lookup之八 查找高速缓存

    可以配置查找转换以高速缓存查找文件或表.PowerCenter 将在处理高速缓存查找转换中的第一个数据行时在存储器中建立高速缓存.它将根据您在转换或会话特性中配置的数量来分配高速缓存区内存.Power ...

  4. HDU 3910 (13.10.31)

    Description Maybe you know “San Guo Sha”, but I guess you didn’t hear the game: “Liang Guo Sha”! Let ...

  5. C语言获取系统当前时间

    C语言获取系统当前时间 time_t -- 时间类型 struct tm -- 时间结构 time(&now)函数获取当前时间距1970年1月1日的秒数,以秒计数单位. localtime ( ...

  6. Java基础（五）：数组和Java方法

    一.Java数组: 1.声明数组变量: 首先必须声明数组变量,才能在程序中使用数组.下面是声明数组变量的语法:注意: 建议使用 dataType[] arrayRefVar 的声明风格声明数组变量. ...

  7. 理解JavaScript模仿块作用域

    1.JS没有块作用域 在C和Java中,一对大括号{}决定一个作用域,比如for循环.在js中,变量可以在函数任何一处定义,并且忽略重复定义.变量初始化之前使用,值永远是undefined. func ...

  8. 数据需求统计常用awk命令

    原文:http://www.5iops.com/html/2013/script_0418/267.html 1.将时间转换为时间戳 select unix_timestamp('2009-10-26 ...

  9. 关于COM组件log的位置

    进程内组件写的log,如果不指定路径直接提供文件名,log文件的位置在dll所在的目录中. 进程外组件写的log,如果不指定路径直接提供文件名,log文件的位置不在exe所在的目录中,而是在系统目录. ...

  10. MyEclipse开发Rest服务入门

    MyEclipse支持Rest服务,开发起来非常方便,下面我就举一个计算机的例子: 实现功能:加.减.乘.除: 效果如下: Rest服务要点:每个服务或任何东西都有一个URI: 步骤1:创建Web S ...