用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. Java：java+内存分配及变量存储位置的区别

    Java内存区分 Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分 ...

  2. BeautifulSoup4----利用find_all和get方法来获取信息

    中文文档 官方教学网页源码: <html> <head> <title>Page title</title> </head> <bod ...

  3. iOS开发-Quartz2D初识

    Quartz2D如果单独的从Quartz,那么会发现Quartz是一个开源的Java作业调度框架,单独从英文翻译的角度来看的话Quartz的英文是石英,如果有的时候不小心搜索会发现手表推荐.本文中介绍 ...

  4. 红黑树，TreeMap，插入操作

    红黑树 红黑树顾名思义就是节点是红色或者黑色的平衡二叉树,它通过颜色的约束来维持着二叉树的平衡.对于一棵有效的红黑树二叉树而言我们必须增加如下规则: 1.每个节点都只能是红色或者黑色 2.根节点是黑色 ...

  5. hadoop fs:du & count统计hdfs文件（目录下文件）大小的用法

    hadoop fs 更多用法,请参考官网:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html 以下是我的使用hadoop fs -du统计文 ...

  6. COM中导出GUID

      编写COM组件的时候需要导出GUID,以下是代码示例. extern "C" const GUID CLSID_Dictionary =         { 0x54bf656 ...

  7. 初探 hexo博客

    近期两天迷上了hexo和gitcafe.最终搭建好了自己的个人主页.以后也能够用那个来写博客啦~直接用的gitcafe的二级域名和server,(gitcafe的server在国外.速度也挺快的),h ...

  8. 破解无线网络密码-BT3如何使用2

    本教程只作学习和交流使用,任何其它商用与本人无关, 在开始教程之前, 首先需要用到几个软件,感兴趣的朋友看完贴子后可以去百度搜一下下载地址, 虚拟机: VMware Workstation 6.5 正 ...

  9. linux查询文件中某几行

    查询文件中某几行: sudo cat /etc/tinyproxy.conf | head -n | tail -n + [一]从第3000行开始,显示1000行.即显示3000~3999行 cat ...

  10. vb.net 模拟UDP通信

    Imports System.Net Imports System.Text.Encoding Public Class Form1 Dim publisher As New Sockets.UdpC ...