标签: bootstrap-modal

我似乎无法使用Bootstrap 3获取模态事件.我想在我的模态关闭时执行操作,但什么也没发生.

这是我的剥离HTML:

<button type="button" data-toggle="modal" data-target="#imageUpload">Launch modal</button>

<div class="modal fade" id="imageUpload" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        Upload form here
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

和我的JS:

$(function(){
    $('#imageUpload').modal({
        show: false
    });

    $('#imageUpload').on('hidden', function () {
        window.alert('hidden event fired!');
    });
});

我把JSfiddle放在一起 - http://jsfiddle.net/EcnC3/1/

我没有发现任何其他关于模态事件的报告在Bootstrap 3中不起作用所以我确定我做错了什么,但是无法搞清楚.谢谢你尽你所能的帮助

我希望用户单击"提交"按钮,模式会自动关闭.

如果我添加data-dismiss="modal"提交<button>,它将无法运行submitComments().

我试图做一些类似的事情$('#myModal').modal('hide');,但没有成功.

那么如何关闭Angular 2中的模态呢？谢谢

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

.

submitComments() {
    // I want to do something like $('#myModal').modal('hide'); here.
}

我不想在问题/答案中建议使用angular2-bootstrap或ng2-bs3-modal Angular 2 Bootstrap Modal 和Angular 2.0 and Modal Dialog

现在.我知道什么打开和关闭引导模式.

• 显示屏在display: none;和之间切换display: block;
• 一个属性可打开,div之间aria-hidden="true"并aria-hidden="false

所以,我自然认为如果我这样绑定aria-hidden属性[aria-hidden]="true",我就可以操纵它.可悲的是,我不能约束,aria-hidden因为它不是一个已知的属性div.(注意,attr.aria-hidden不存在)

我知道这可以用JQuery实现$('#myModal').modal()如下问题所示如何使用jQuery打开一个Bootstrap模式窗口？

所以我的问题是,是否有一个TypeScript功能modal()与JQuery 做同样的事情,或者有没有办法将函数/变量绑定到aria-hidden？

我目前html:

<div id="createAccountModal" class="modal fade customForm" role="dialog" [aria-hidden]="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create account</h4>
            </div>
            <div class="modal-body">
               <p>Lorem ipsum</P>
            </div>
            <div class="modal-footer align-left">
                My custom footer
            </div>
        </div> …

我试图在页面加载时启动Bootstrap模式而不触发HTML按钮或使用jQuery.

这是我的代码:

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<div id="my-modal" class="modal fade">
    <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">Title</h4>
            </div>
            <div class="modal-body">
                Hello World!
            </div>
        </div>
    </div> 
</div>

这在你打电话时有效

$('#my-modal').modal('show');

但我不想调用方法或触发按钮.有没有办法在页面加载时自动启动模态？

演示:小提琴

FIX UPDATE:似乎我正在初始化盒子的方式导致问题在这里解决了什么

 <script>
    $(function () {
        var input = document.getElementById("keyword");
        var autocomplete = new google.maps.places.Autocomplete(input);

        $('#my-modal').modal('show');

    });

</script>
<style>
    .pac-container {
        z-index: 10000 !important;
    }
</style>

更新:我已经更新了代码非常简单,这个http://jsfiddle.net/g8vxmLn9/1/ 工作的原因是因为它使用较旧的bootstrap和jquery所以我假设因为我使用较新我遇到了问题.

我只想在bootstrap(3.3)模型中显示一个自动完成框,并在键入时显示结果.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places">   </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div>
    <div id="my-modal" class="modal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <input name="keyword" id="keyword" type="text" />
            </div>

        </div>
    </div>
</div>
<script>
    $(function () {
        $("#my-modal").modal({ …

需要建议,如何打开一个twitter bootstrap模式,从Asp.net Webform代码背后？

我想根据保存时的某些要求打开模态.一旦用户单击保存按钮,它将在后面的代码中运行验证,如果有任何验证错误,则在引导模式对话框中显示所有错误.这一切都应该在保存按钮单击时发生.

我尝试使用下面的代码,但它提示我java脚本错误"错误:对象不支持属性或方法'模态'".谢谢

Asp.Net Webforms 4.5

Bootstrap V3.0.1

jQuery的1.9.0.js

jQuery的UI,1.8.24.js

Default.aspx 

<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

<div class="container">
    <div class="btn-group">
        <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"          
        OnClick="btnSubmit_Click"></asp:Button>
    </div>
</div>


<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" 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">Validation Errors List for HP7 Citation</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div> …

如何删除特定模态的bootstrap模态覆盖.当模态出现背景有黑色和一些不透明度有任何删除元素的选项...

我有一个页面,其中包含大量信息的模态,因此您需要滚动.此模态包含指向第二个模态的链接.

当我

• 开放模式1
• 点击链接打开模态2(模态1停留在后台)
• 然后关闭模态2,以便我回到模态1

模态1失去滚动(仍然有一个滚动条,但它没有做任何事情).相反,模态保持在打开模态2时的位置.

我一开始就用js关闭背景模态(但这会让第二个模态上的滚动变得混乱).似乎每当我尝试打开/关闭多个模态时,我总是会遇到滚动问题.

有关如何处理这个的任何建议？

我不确定为什么,但所有的模态功能都不适用于我.我检查了它们的版本和负载.

我一直收到此错误消息:

Uncaught TypeError: $(...).modal is not a function

为了隐藏我已经找到了另一种选择.代替:

$('#myModal').modal('hide');

我用过这个:

$('#myModal .close').click();

而且效果很好.

现在的问题在于节目

$('#myModal').modal("show");

我也试过了

$('#myModal').modal("toggle");

和:

$('#myModal').modal();

但不幸的是,他们都没有工作.

这里的html代码 - 当点击按钮时,我会做一些验证并处理来自Web服务的json数据,如果成功,那么我想要显示我的模态 - 一切都在工作,除了节目.

 <button type="button" id="creatNewAcount" class="btn btn-default" data-toggle="modal">Sign up</button>

如果有任何替代方案我想知道.

我正在尝试创建一个可重复使用的远程模态.我们的想法是创建一个模型容器并在其中呈现内容yield并在需要时呈现内容.

注意:所有HTML代码都将被写入HAML.我正在使用bootstrap-modal-rails gem来处理我的模态.

我的模态容器布局(不是部分):

%div(class="modal" id="mainModal ajax-modal" tabindex="-1" role="dialog"){:'aria-labelledby'=>"mainModalLabel", :'aria-hidden'=>"true"}
  %div(class="c-modal__container")
    %div(class="c-modal__layout modal__content") 
      = yield

在我的application.html.haml,我有一个div定义模态位置如下:

-# ...
%div(id="modal-holder")

- unless params[:nojs]
  = javascript_include_tag 'desktop'

-# ...

这是我的问题来自哪里.我有一个book controller用户可以添加书籍的地方.我有一个多步注册,我的new行动必须是我的模式.当用户点击New book链接时,我正在加载一个新模式.

我的New book链接:

= link_to "New book", new_book_path, class: "c-link--navbar", data: { modal: true }

CoffeeScript的(重新写入jQuery)的模式(此代码这篇文章):

$(function() {
  var modal_holder_selector, modal_selector;
      modal_holder_selector = '#modal-holder';
      modal_selector = '.modal';
  $(document).on('click', 'a[data-modal]', function() …