标签: bootstrap-modal

我正在设置最后一点设计,需要允许用户从我的帐户页面更改密码.我已经从设计中看了这个https://github.com/plataformatec/devise/wiki/How-To:-Allow-users-to-edit-their-password)页面,但仍然无法得到它正确的工作.

当我点击链接以显示我的模态时,我收到以下错误.

ActionController::RoutingError (No route matches [GET] "/users/1/change_password_modal"):

当我提交更改密码请求时,我收到以下错误:

unknown attribute: current_password

我提出模式的链接是:

button.btn.btn-dashboard data-target="#change_password_modal" data-toggle="modal"

最后是我的模态

 <div class="modal fade" id="change_password_modal">
  <div class="modal-dialog">
    <div class="modal-content">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
    <h2 class="modal-title">Change Password</h2>
  </div>
    <div class="modal-body">
      <div class="flash"></div>
        <%= form_for(resource, :as => resource_name, :url => edit_user_registration_path, :html => { :method => :put }) do |f| %>
        <%= devise_error_messages! %>
        <div>
          <%= f.password_field :current_password, :autocomplete => "off", class: "sitewide-input", placeholder: "Current Password" %>
        </div>

        <div>
          <%= f.password_field :password, :autocomplete …

我的形式有一个模态

<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-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Image Tag Description</h4>
      </div>
      <div class="modal-body">
          <p id="desc">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
          <h2 id="cost">Cost : 20$</h2>
      </div> …

我有一个带有bootstrap模式的页面(手册:http://getbootstrap.com/javascript/#modals).

我想在页面加载时打开这个模态.然而,这并没有发生.

<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>
      </div>
      <div class="modal-body">
        <p>However the account provided is not known.<BR>
        If you just got invited to the group, please wait for a day to have the database synchronized.</p>

        <p>You will now be shown the Demo site.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> …

我在Web应用程序中有一个注册功能,它使用户通过一个四步过程向站点添加信息.当用户单击"添加"按钮时,将出现一个Bootstrap模式,用户在步骤#1启动.

每个步骤都有一个选项菜单供用户选择,每个步骤中填充的数据取决于前面步骤的选择.用户可以将步骤留空并继续,但是他们没有选择来完成剩余的过程.除了iPad上的Safari之外,此功能在每个桌面和移动浏览器中都表现得如预期.

在Safari中,用户将打开模式,在步骤1中选择数据,然后转到步骤2.如果用户未在此下拉列表中选择任何内容,则可以继续执行步骤3.但是,如果他们在步骤2中做出选择,模态消失,用户无法继续.这只发生在Safari for iPad/iPhone上.

我已尝试在iPad上设置Web检查器并在Mac上加载控制台,但控制台中没有错误或其他消息.我试图弄清楚这是否是Safari中的错误,或者Safari是否与其他浏览器不同地处理来自select标签的模态输入.

我是Angular的新手.我正在尝试在此链接重新创建模态样本https://angular-ui.github.io/bootstrap/ 我没有运气!我创建了一个plunker http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue我只需要能够在按钮点击上打开一个模态.我收到错误消息错误:[ng:areq]参数'ModalDemoCtrl'不是函数,未定义

这是我的看法

<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled …

我试图让bootstrap模式中的选项卡打开,具体取决于所点击的链接.无论我尝试过什么,它只会在第一个标签上打开.这两个链接如下:

<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a>
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a>

并且模态的标记在这里:

<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-offset-top">
    <div class="modal-content">
    <div class="modal-body">
    <div class="sd-tabs sd-tab-interaction">
      <div class="row">
        <ul class="nav nav-tabs col-md-3 custom-bullet">

          <li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li>
          <li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li>

        </ul>
        <div class="tab-content col-md-9">
          <form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? -->

            <h3 class="tab-title">Tab 1</h3>

          </form> <!-- Wrong Vehicle? -->



          <form id="tab-mileage" class="tab-pane"> <!-- Mileage -->

            <h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2>
            <h3 …

我正在尝试打开一个显示项目列表的模态.项目列表在视图中已作为变量提供.如何将此变量传递给模态？

下面是主视图的大致情况:

View.html.erb

<div>
  <%= @users.each do |user|%>
    <h1>user.name</h1>
    <h2>user.email</h2>
    <%= link_to remote: true, 'data-toggle' => 'modal', 'data-target' => '#taskModal do %>           
      <i><%= user.tasks.count%></i>
    <% end %>
  <% end %>
</div>

<div class="modal" id="taskModal" aria-hidden="true">
...
<%= render partial: 'list_modal' %>

list_modal 是部分与模态的结构.

我有一个像这样的按钮

<form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>

并且我有一些javascript,只要按下按钮就会启动一个模态...这只是为了让用户知道下一页正在加载.

<script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            $('#render_page').modal('show');
        });
    });
</script>

这是模态的html

<div class="modal fade" id="render_page" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="form-horizontal">

                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div id="user_msg" align="left">Rendering Page... </div>
                </div>

            </div>                                  
        </div>
    </div>
</div>

这一切都适用于Firefox和Chrome,但Safari没有显示模式？如果我将表单放在按钮中,它会启动模式,但它不会提交表单.所以这两个方面,表单提交和模式都有效,但safari不想同时做到这两点？

我正在使用具有锚链接的jasny bootstrap画布菜单,以便在点击时导航到1月部分.当我点击锚链接时,我添加了一个jquery解决方案来关闭画布外菜单.

JQUERY:关闭Off-Canvas菜单并导航到Anchor Link区号:

$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");});

问题当关闭画布菜单处于活动状态时,上面的代码在992px浏览器宽度下工作得很好,但是当浏览器宽度超过992px时,关闭画布菜单变为固定的左菜单,但是当我点击锚链接时仍然会出现黑色背景.我试图在992px宽度之后使用removeAttr 数据目标和数据切换,但没有成功.我仍然是JQuery的新手,我似乎无法弄清楚这一点.

当我在992px宽度后单击锚点链接时,我该怎么做才能防止出现背景？

额外:当我选择992px宽度后的锚点链接时,菜单似乎也会跳转,当画布菜单成为固定的左菜单时,如何防止它跳转？

问题的小提琴

先决条件:

• Bootstrap.min.css

• Bootstrap.min.js

• jasny-bootstrap.css

• jasny-bootstrap.js

JQuery的:

/Close Modal when navigating to anchor   */
$('.navmenu-nav li a').on('click', function(){
   $(".backdrop").hide( 0, function() {});
    $("body").removeClass("bs.offcanvas");

    });
/Simulate Modal Opening */

$(".nav-link").click(function() { $("#navToggle").click() })

$('.navmenu').on('show.bs.offcanvas', function() {
    $('.backdrop').fadeIn();
});

$('.navmenu').on('hide.bs.offcanvas', function() {
    $('.backdrop').fadeOut();
});


/Close Modal on Resize */
$(window).resize(function() {
  if ($(window).width() > 992) {
    $(".backdrop").hide( 0, function() …

我正在使用bootstrap 3中的modal,它包含在输入字段中

当加载页面时(不是通过单击按钮),使用jquery代码启动此模式

$().ready(function()
{
    $('#OTPModal').modal('show');
});

一旦显示模态,我就会通过此代码使输入成为焦点

$('#OTPModal').on('shown.bs.modal', function () 
{
    $('#OTPField').focus();
});

这段代码在谷歌浏览器中运行良好,但它不在Firefox中!

用chrome和firefox检查jsFiddle以查看不同的内容

https://jsfiddle.net/aq9Laaew/272015/

firefox版本:63.0.1(64位)

chrome版本:版本70.0.3538.77(官方版本)(64位)