用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. Latex 初学者入门（四）-- 多个作者共享同一个地址

    又给老板改格式,其实感觉大多会议都是模板不同,不同主要在于注释,作者,摘要以及引用文献的不同,上次的那篇讲bib数据库的用法,真是倒腾了一整天,不知道为什么一定要使用这种东西,而且老板貌似对人家的风格 ...

  2. Json解析教程（四.FastJson 的使用）

    简介 Fastjson是一个Java语言编写的高性能功能完善的JSON库. 高性能 fastjson采用独创的算法,将parse的速度提升到极致,超过所有json库,包括曾经号称最快的jackson. ...

  3. assets raw 资源 AssetManager

    assets raw 目录简介 assets核心特性:不会被编译成二进制,支持子目录(可以分类,这是相对raw目录最大的好处),通过文件名访问,调用getAssets通过AssetManager访问 ...

  4. Java主流Web Service框架介绍：CXF和Axis2

    CXF和Axis2是目前java平台上最主流的两个框架,虽然两个项目都隶属ASF,但却是基于不同思想和风格实现的,因此也各有所长.   CXF:http://cxf.apache.org/ 是由过去的 ...

  5. ASP.NET MVC 编程参考

    ASP.NET MVC 编程参考   转载请注明出处:http://surfsky.cnblogs.com MVC    参考 http://msdn.microsoft.com/zh-cn/dd40 ...

  6. GO语言基础之struct

    结构struct 1. Go 中的struct与C中的struct非常相似,并且Go没有class 2. 使用 type <Name> struct{} 定义结构,名称遵循可见性规则(即首 ...

  7. 转： Source Code Lookup in Eclipse(主要讲的是java的)

    Source Code Lookup in Eclipse https://www.intertech.com/Blog/source-code-lookup-in-eclipse/

  8. easyui datagrid种编辑器combobox选择的值不显示解决方案

    var combobox_json = [{ "combobox_value" : "GDLB01", "combobox_name" : ...

  9. 给MySQL增加一个表示例

    仅为记录用,图样图升破,看客速退散. create table logtable(   id int(20) PRIMARY KEY AUTO_INCREMENT,   concept varchar ...

  10. CentOS6.X下安装配置独立SVN服务器Subversion server

    Subversion(简称SVN,svn),一个开放源码的版本号控制系统.相较于RCS.CVS,它採用了分支管理系统,它的设计目标就是代替CVS.互联网上非常多版本号控***务已从CVS转移到Subv ...