用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. [Ubuntu] ubuntu的tty下挂载移动硬盘拷贝数据

    转载:http://blog.csdn.net/langb2014/article/details/51567460 更换CUDA好多人都更换成功了,我却失败了,然后电脑最后进不了界面了,只有tty端 ...

  2. 特殊汉字“𣸭”引发的对于字符集的思考；mysql字符集；sqlalchemy字符集设置；客户端字符集设置；

    字符集.字符序的概念与联系 在数据的存储上,MySQL提供了不同的字符集支持.而在数据的对比操作上,则提供了不同的字符序支持. MySQL提供了不同级别的设置,包括server级.database级. ...

  3. Maven中<dependencies>节点和<dependencyManagement>节点的区别

    dependencyManagement只是插件管理,并不是真正的插件依赖,所以里面包含的插件在没有子项目使用的时候,并不会真正下载 1 ．使用项目继承 利用项目继承可以将结构信息,部署信息,共同的依 ...

  4. Informatica 常用组件Lookup之九 配置未连接的查找转换

    在映射中,未连接的查找转换与管道是分开的.您可以使用 :LKP 引用限定符编写表达式以调用其它转换中的查找.未连接查找的常用用法包括: 测试表达式中某个查找的结果 基于查找结果过滤行 基于查找的结果将 ...

  5. Tengine zabbix 监控

    Tengine 配置 在http 段下新增以下配置 req_status_zone server_stat "$host" 3M; server { listen 9008; lo ...

  6. [Javascript] Hositing

    First, memory is set aside for all necessary variables and declared functions. Function expression n ...

  7. Immediately-Invoked Puzzler

    The Poplar Puzzle-makers weren’t too impressed. They barely noticed your simple and beautiful array ...

  8. 【Nodejs】理想论坛帖子下载爬虫1.04

    一直想做一个能把理想论坛指定页范围的帖子都能完整下载下来的爬虫,但未能如愿. 主要的障碍在并发数的控制和长时间任务的突然退出,比如想下载前五页的帖子,分析后可得到大约15000个主贴或子贴,如果用回调 ...

  9. 用L脚本语言实现&quot;L脚本语言控制台&quot;

    下载Windows平台解释引擎 L脚本语言中能够将随意字符串当做一行L脚本语言程序来运行.通过循环接收用户输入,就是一个控制台IDE了 #scp #scp没有控制台IDE?我们自己用scp来实现一个 ...

  10. Python中参数多个值的表示法

    今天在写Python脚本时,调用了数据管理-制图综合-融合工具,在ArcGIS里操作的参数设置如下: 如果融合字段只有一个那好办,如果融合字段有多个我该怎么表达,查看帮助文档中的示例代码明白了: 所以 ...