Bootstrap 对话框.pdfVIP

Bootstrap 对话框 Modals （模态框）就像对话框。 它⽤于 显⽰对话框提⽰ 显⽰警告 显⽰确认对话框 显⽰较⼤版本的图像 显⽰⼀长串条款和条件 显⽰注册/登录 单 使⽤Bootstrap 3 ，模态框已经可以响应，这意味着它们看起来不错，即使在较⼩的屏 幕上也能正常运⾏。 每个模态框都应该有⼀个带有类 modal的容器。 为了给模态框添加淡⼊淡出效果，我们需要将类 fade 添加到同⼀个容器中。 接下来，我们定义⼀个具有类 modal-dialog的div元素。这是负责控制模态框的⼤ ⼩。 在模态对话框中，我们将创建⼀个封装模态框各个⼦部分的wrapper元素。 这个wrapper元素应该有⼀个类叫 modal-content。 模态框的⼦部分是header ，body和footer 。 header和footer部分是可选的。要创建模态框的header ，你需要⼀个 div 元素与类 modal-header。 在⾥⾯你可以放⼀个模态框标题和模态框关闭图标。 模态框标题使⽤modal-title类的h4元素给出。 这⾥的dismiss图标是⼀个乘法 （x ）符号，它围绕⼀个按钮元素。此按钮应该使⽤类 close，使它与模态框标题的左上⾓对齐。 添加⼀个 data-dismiss属性可以使按钮在单击时关闭模态框。 对于body ，我们需要⼀个modal-body类的div 。 为了创建模态框footer ，我们定义⼀个具有类 modal-footer的div元素。 默认情况下，模态框footer 中的内容是右对齐的。 !DOCTYPE html html lang= en head script type= text/javascript src= http://code.jquery .com/jquery-1.10.1.min.js /script link rel= stylesheet href= /bootstrap/3.2.0/css/bootst link rel= stylesheet href= /bootstrap/3.2.0/css/bootst script src= https://ajax ./ajax/libs/jquery/1.11.1/jquery . script src= /bootstrap/3.2.0/js/bootstra /head body style= margin:30px !-- Modal Handle -- button class= btn btn-primary btn-lg data-toggle= modal da Launch modal /button !-- Modal Markup kept out of all the div elements -- div class= modal fade id= myModal div class= modal-dialog div class= modal-content !-- Modal Header -- div class= modal-header button type= button class= close data-dis h4 class= modal-title Welcome Back!/h4 /div !-- Modal Body -- div class= modal-body h1Hello Readers!/h1 /div !-- Modal Footer -- div class= modal-footer button type= button class= btn btn-defa