计算机教程

必赢娱乐棋牌Bootstrap之:模态窗口

29 6月 , 2019  

Bootstrap提供了单独的js文件来提供模态窗口功能,同时也都集成到了bootstrap.min.js中

模态对话框,标签切换,Tooltio,弹出框,提示信息,按钮组,折叠,幻灯片

Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分:

1.模态对话框 

  弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮

  触发按钮+对话框

  弹出框主体,一般使用“modal-body”表示,弹出框的主要内容

  <head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″>
    <script
src=”http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt;
    <script
src=”http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"&gt;&lt;/script&gt;
    <link rel=”stylesheet”>
  </head>
  <body>
    <button data-toggle=”modal”
data-target=”#myModal”>点击触发模态对话框</button>

  弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮

    //data-toggle=”modal” 触发器

例如:

    //data-target=”#myModal”  用于和相应的对话框 id 进行对应

<button data-toggle=”modal” data-target=”#mymodal-data”
type=”button”>通过data-target触发</button>
<!– 模态弹出窗内容 –>
<div id=”mymodal-data” tabindex=”-1″ role=”dialog”
aria-labelledby=”mySmallModalLabel” aria-hidden=”true”>
 <div >
  <div >
   <div >
    <button type=”button” data-dismiss=”modal”><span
aria-hidden=”true”>×</span><span
>Close</span></button>
    <h4 >模态弹出窗标题</h4>
   </div>
   <div >
    <p>模态弹出窗主体内容</p>
   </div>
   <div >
    <button type=”button”
data-dismiss=”modal”>关闭</button>
    <button type=”button” >保存</button>
   </div>
  </div>
 </div>
</div>

    
    <div id=”myModal” tabindex=”-1″ role=”dialog”
aria-hidden=”true”>    //触发类
        <div >     居中对话框
          <div >  设置内容
            <div >
              <button type=”button”
data-dismiss=”modal”>×</button>
              <h4
id=”myModalLabel”>对话框标题</h4>
            </div>
            <div >模态对话框内容
            </div>
            <div >
              <button type=”button”
data-dismiss=”modal”>Close</button>
              <button type=”button” >Save
change</button>
            </div>
          </div>
        </div>
    </div>
  </body>

 

必赢娱乐棋牌 1

另外还有一种通过jQuery调用方式:

2.标签切换

去掉上面的data-toggle=”modal”和data-target=”…”的属性,然后直接通过jquery方式来调用触发

  <ul >
    <li ><a
**data-toggle=”tab”>首页</a></li>
    <li><a data-toggle=”tab”>最新</a></li>
    <li><a data-toggle=”tab”>热门</a></li>
    <li><a data-toggle=”tab”>排行</a></li>
  </ul>
  <div >
    <div id=”home”>
      <p>首页——-</p>
    </div>
    <div id=”profile”>
      <p>最新+++++++</p>
    </div>
    <div id=”hot”>
      <p>热门——-</p>
    </div>
    <div id=”settings”>
      <p>排行+++++++</p>
    </div>**

<script type=”text/javascript”>
    $(function(){
        $(“.btn-mymodal”).click({
           $(“#mymodal-data”).modal();
        }); 
    })
</script>

  </div>
    必赢娱乐棋牌 2

注:还可通过参数设置来改变效果

3.Tooltio**

keyboard;backdrop;show;

  鼠标放在目标上显示额外提示  **

remote:此参数代表通过此来设置从其他地方加载的内容的地址,然后到modal中显示

  <a data-toggle=”tooltip” data-placement=”left”
title=”额外提示内容” 
>工具提示</a>

例如:

  $(element).tooltip();   //尾部添加生效

<script type=”text/javascript”>
    $(function(){
        $(“.btn-mymodal”).click({
           $(“#mymodal-data”).modal({

4.弹出框 

        keyboard:false,

  <a data-toggle=”popover” data-content=”弹出框主要内容”
data-original-title=”弹出框标题”
data-placement=”right”></a>

  $(element).popover(options)

      remote:http://www.baidu.com

5.提示信息 

    });
        }); 
    })
</script>

  <div >警告,服务器崩了!!
    <a data-dismiss=”alert” >X</a> 关闭事件
  </div>

 

  关闭后继续执行任务

 

  $(‘#myAlert’).bind(‘closed.bs.alert’,function(){———–})

模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下:

  closed.bs.alert   : 当警告被关闭后触发此事件**


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图