标签: bootstrap-modal

使用Bootstrap模态html5Mode(true).

单击launch demo modal第一次单击时,/#myModal不会显示对模态的URL更改.

再次单击时launch demo modal,会出现模态.

在正常模式下($locationProvider.html5Mode(false);模式出现在第一次点击.

如何让Modal出现在第一次点击？

标准模态代码: -

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- 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-body">
          ...
        </div>

      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

角度代码: -

var myApp = angular.module('myApp', []);

myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider.
      when('/', {
        templateUrl: 'partials/home',
        controller: …

所以,我正在为我的朋友制作这个网站,这只是一个爱好.我从WrapBootstrap.com实施了"循环"引导主题- >链接:https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

但是,在"服务"部分下,每个部分都有一个"阅读更多"功能.但默认情况下,这个阅读更多的链接什么都不做？

我非常希望弹出一个带有一些额外文本的模态窗口(因此"阅读更多").

我已经尝试过,但我似乎无法让它发挥作用.你将如何处理这项任务？我该如何实施呢？

您可以在http://flixberg.dk/Kasper_fysio/index.html上查看我的实时工作版本

如何获取"阅读更多"按钮以启动包含"阅读更多"文本的模态窗口？

非常感谢你.

有问题的代码如下,您可以在其中看到"阅读更多":

<!-- SERVICES -->
        <div id="services" class="section darker services" >
            <div class="container">
                <div class="section-heading">
                    <h2>SERVICES</h2>
                    <p>Når kun det bedste er godt nok - din krop og fysik er min priroritet</p>
                    <hr />
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="service-item">
                                <span class="icon-heart service-icon"></span>
                                <div class="service-text">
                                    <h3>Idrætsskader</h3>
                                    <p>Behandling af idrætsskader er væsentligt for din fremtidige præstation. Med omhyggelig behandling og genoptræning hos Kasper Bisgaard kommer du hurtigt på fode …

我有6个图像加载到不同的6个不同的模态窗口,它们每个都有一个下一个按钮,还有一个关闭按钮.下一个按钮使用以下jquery代码:

    $('#nextModal12').click(function() {
        $('#featuresModal1').modal('hide');
        $('#featuresModal1').on('hidden.bs.modal', function () {
            $('#featuresModal2').modal('show');
            document.getElementById('#featuresModal1').style.display="none";
        });
    });

    $('#nextModal23').click(function() {
        $('#featuresModal2').modal('hide');     
        $('#featuresModal2').on('hidden.bs.modal', function () {
            $('#featuresModal3').modal('show');
            document.getElementById('#featuresModal2').style.display="none";                            
        });
    });     

但是,问题是:即使我通过单击CLOSE按钮而不是下一个按钮来关闭/隐藏第一个模态('#nextModal12'),也会出现第二个模态.

我相信这是因为即使我没有点击下一个按钮,也会拾取并再次调用hidden.bs.modal函数.如何防止脚本不加选择地拾取hidden.bs.modal函数？

我如何创建一个模式,用户可以在表格中编辑所选行的内容？有人可以教我如何做到这一点？我在Web开发方面有点新意,我只需要这样做.谢谢!

这是我的代码(HTML):

<div class="row">
    <div class="col-xs-12 col-md-12">
        <table class="table table-condensed table-hover table-bordered">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>

            </tr>
            <tr>
                <td>Sam</td>
                <td>Smith</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

我在我的页面中包含了Bootstrap模式.但是当我按下按钮时,我的页面会变灰,没有出现弹出对话框.但是,当我按下ESC按钮时,对话框会在退出前闪烁一次.我试过的另一个例子是,我包含//= bootstrap/modal在我的application.js文件中.在这个文件里面我也有了这条线//= bootstrap.当我同时包含这一行时,按下按钮时,模态仅停留不到1秒.

以下是我的视图页面的代码,

<% provide(:title, "Log in") %>
<div class="center jumbotron">
<h1> Kaching </h1>
<div class = "row" >
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(:session, url: login_path) do |f| %>

    <%= f.label :logID, "Log ID" %>
    <%= f.text_field :logID %>

    <%= f.label :password %>
    <%= f.password_field :password, class: 'form-control' %>

    <%= f.submit "Log In", class:"btn btn-primary" %>
    <% end %>
  </div>
</div>
</div>
<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button …

我的工作正常modal，显示unordered list。其中一个选项list包含一个按钮，用于打开内部组件modal（内部组件又包含一个视频播放器）。这一切都很好，但是当我关闭inner时modal，modals（初始和internal）都会关闭。下面的代码显示了我对内部所做的事情modal：

<tr><td>List Item <button class="btn btn-success" data-toggle="modal" data-target="#myInnerModal1"></button>
        <div class="modal" id="myInnerModal1">
            <div class="modal-dialogue">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Title</h4>
                    </div>
                <div class="modal-body">
                    <video class="myVideo" id="preview1" controls>
                        <source src="video.m4v" type="video/mp4">
                    </video>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
</td></tr>

我想找到一种方法来指定在dismiss-modal class其modal关闭（在这种情况下，这将是myInnerModal1）。

这是我的静态HTML:

<select name="codici_transazioni" class="selectpicker" id="codici_transazioni">
    <option value="dsjkcbs">dsjkcbs - <i>Email, Facebook</i></option>
    <option value="scgwfsd" selected class="normaleSelect">scgwfsd - <i>Facebook</i></option>
    <option value="stdstyd">stdstyd - <i>Twitter</i></option>
</select>

这是从模态上下文中获取的一段代码.我希望我的select能够填充在.php文件上执行的Ajax结果,该文件返回MySQL数据库的结果.

现在,所有的Ajax和DB部分都在工作,当我尝试<select>在Ajax成功后通过jQuery 填充它时,结果与上面的默认值相同!

这是我的jQuery:

$('#codici_transazioni').html("");
for (var i = received.length - 1; i >= 0; i--) {
    <other DOM loading>
     $('#codici_transazioni').append("<option value=" + temp_code_transaction + "> " + temp_code_transaction + "- <i>" + temp_type_transaction+ "</i></option>");
}

我注意到Chrome(因此在加载页面后)在select之后创建了一些div.

我知道这是由Bootstrap完成的,但是如何在Ajax执行后重新加载此代码的创建以使选择下拉动态？

我有这样的代码:

$("#savedata").submit(function(e){
e.preventDefault();
$.ajax({
    type : 'POST',
    data: $("#savedata").serialize(),
    url : "<?php echo site_url('ppdb/simpan_data/'.$jenjang);?>",
    success : function(data){
        window.location.reload();
        $('#cekulang').modal('show');
    }
});
return false;
});

我想在页面完成刷新后打开模态.但我首先打开模态然后用该代码刷新页面.

感谢帮助.

这是我的代码：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private http: Http, private route: ActivatedRoute,private router: Router, private modalService: NgbModal) { }

editDocumentRow = function (documentId, modal) {
    this.http.get(ConstantComponent.url + '/documentmanagerapi/Get/' + documentId).map((res: Response) => res.json()).subscribe(data => {
    this.documentsRowDetails = data
    this.modalService.open(modal)
    this.modalService.close() // not working
})

}

我试图 this.modalService.close()在其他功能中使用。但是它甚至不能在相同的功能下工作this.modalService.open(modal)完美运行。

我收到此错误： this.modalService.close is not a function

有什么建议吗？

我有一个Angular 6应用，我正在尝试实现从屏幕右侧滑入的模态窗口，如下所示：https : //codepen.io/anon/pen/OayRVy

但是，无论我做什么尝试，都无法覆盖模式窗口的位置。我唯一能够更改的是标题/正文的背景颜色。

我的模式HTML：

<ng-template #content let-modal="close">

      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Table of Contents</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"><span aria-hidden="true">&times;</span></button>
      </div>

      <div class="modal-body">
        <p>
          ....
        </p>
      </div>

</ng-template>

组件代码：

  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

  constructor(private modalService: NgbModal) {}

  public open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) => {
      ...
    }, (reason) => {
      ...
    });
  }

如果我检查HTML并在Chrome DevTools中将float: right属性添加到.modal-dialog容器，它将完成我想要的操作。但是，添加一个

.modal-dialog {
  float: right;
}

到我的.scss文件中对该组件无效。

谁能告诉我如何覆盖默认的引导程序样式，以便我可以强制其显示在屏幕的右侧并占据其高​​度的100％？