标签: bootstrap-modal

我一直在Yii2中使用模态窗口中的表单,并且我遇到了一个问题,当表单在引导模式窗口内时,标准Yii形式的ajax验证不起作用.

需要明确的是,当字段失去焦点时,会为每个字段触发ajax表单验证.这是标准的Yii表单验证,因此我通过单击所需字段,然后单击该字段来测试模式中的表单.这会触发Yii ajax验证,并应在字段下显示一条红色错误消息,指出"'字段'不能为空."

同样,我的问题是有时ajax验证有效,有时却没有.

我设法将问题陷入与模式代码放置在页面上的位置相关的问题,但是对于我如何影响模式中表单的ajax验证行为没有任何意义.

首先,我将向您展示正常运行的代码.Yii表单验证在模式窗口中的表单上按预期工作.

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\GridView;
use yii\bootstrap\Modal;    
?>
<div class="category-index">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= Html::button('Create Category', [
        'class' => 'btn btn-success btn-ajax-modal',
        'value' => Url::to('/category/create'),
        'data-target' => '#modal_category',
    ]); ?>

    <?php
    Modal::begin([
        'id' => 'modal_category',
        'header' => '<h4>Category</h4>',
    ]);
    echo '<div class="modal-content"></div>';
    Modal::end();
    ?>

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'title',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>

以上代码中需要注意的事项:

1)这是我的类别/索引视图,因此它有一个创建按钮,引导模态代码,然后是类别的Yii gridview.

2)创建按钮具有btn-ajax-modal …

我正在分配的ng-model可以在modal中看到.但是当我更新模态中的数据时,$ scope变量没有更新.还有下拉列表无效,我在控制器中定义了它的值.我是否需要在指令中进行更改.

    <div ng-controller="MainCtrl" class="container">
  <h1>Modal example</h1>
  <button ng-click="toggleModal()" class="btn btn-default">Open modal</button>

  <modal title="Login form" visible="showModal">

      <div>
          <select ng-model="client" ng-change="changeClient()" ng-options="item in clientList">
        <label for="email">Email address</label>
        <input type="text" ng-model="email" id="email" placeholder="Enter email" />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password"  id="password" placeholder="Password" />
      </div>
      <button type="submit" ng-click="buttonClicked()" class="btn btn-default">Submit</button>

  </modal>
</div>

控制器代码

var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
    $scope.email="hello@abc.com";
    $scope.showModal = false;
    $scope.toggleModal = function(){
        $scope.showModal = !$scope.showModal;
    };
    $scope.buttonClicked=function(){
    alert("hello1");
    alert($scope.email);
    alert($scope.client);
    }

    $scope.clientList=["300","600","900"]
    $scope.client=$scope.clientList[0];
    $scope.changeClient …

将Bootstrap Carousel Slider和 Lightbox Gallery添加到单个页面中而没有重大问题似乎相当具有挑战性.

问题:当点击灯箱图片库时,它会打开图片库,同时Carousel滑块图像被图库图片劫持.罪魁祸首似乎是类:.item,img或.inner-carousel

是否可以将模态lighbox和carousel滑块添加到单个页面而不会出现任何问题？

要重新创建问题:单击图库,弹出模式,关闭窗口,现在轮播图片滑块已被替换.http://jsfiddle.net/2aasoyej/

HTML:

<div class="container">
  <div class="row">
    <h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
        <hr>

    <div class="row">

                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 1" href="#"> 
                        <img class="thumbnail img-responsive" id="image-1" src="http://dummyimage.com/600x350/ccc/969696&amp;text=0xD10x810xD00xB50xD10x800xD10x8B0xD00xB9">
                    </a>
                </div>

                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 2" href="#"> 
                        <img class="thumbnail img-responsive" id="image-2" src="http://dummyimage.com/600x350/2255EE/969696&amp;text=0xD10x810xD00xB80xD00xBD0xD00xB80xD00xB9">
                    </a>

                </div>
                <div class="col-12 col-md-4 col-sm-6">
                    <a title="Image 3" href="#"> 
                        <img class="thumbnail img-responsive" id="image-3" src="http://dummyimage.com/600x350/449955/FFF&amp;text=0xD00xB70xD00xB50xD00xBB0xD00xB50xD00xBD0xD10x8B0xD00xB9">
                    </a> …

可以通过Chrome中的集成阻止程序等任何弹出窗口阻止程序阻止引导模式对话框.或者不同的广告块弹出窗口拦截器？如果你不明白我的意思:

我的项目托管在本地Web服务器上.

情景A.

当我尝试test.html通过file://它访问我的文件给我

XMLHttpRequest无法加载 http://127.0.0.1:8887/images/main/2.jpg.没有'Access-Control-Allow-Origin'标头是test.html:1存在于请求的资源上.因此不允许原点'null'访问.

在chrome控制台中,但照片在模式中正确呈现

情景B

但是当我尝试通过http://127.0.0.1:8887它访问test.html时,它不会记录任何控制台错误并打印出来

JFIF Photoshop3.08BIM} 720120601 < 130528-0500ZBaltimore_ MD - MarylandeUSA - 美国detbal-crime2 PKarl Merton FerronUBaltimore Sun Staffn Baltimore SunsNA.1zNA.1xbA巴尔的摩警察站在现场犯罪现场磁带背后据报道,巴尔的摩东南部的S. Chester街和银行街附近发生了一起警方涉嫌枪击事件.一名嫌疑人被枪杀,另一名被羁押,因为调查人员通过证据.(Karl Merton Ferron/Baltimore Sun)iPOLICE INVOLVEDSHOOTINGgBAL1206011517048420 0:0:0:-00001 8BIM 8BIM hhttp://ns.adobe.com/xap/1.0/ Baltimore MD - Maryland USA - United States Baltimore Sun工作人员巴尔的摩太阳队NA.1 NA.1警方参与拍摄BAL1206011517048420 2012-06-01T13:05:28-05:00巴尔的摩警察站在犯罪现场录像带后面,警方参与枪击事件发生后入室盗窃正在进行中,在S. Chester Street和Bank S附近报道

而不是在模态中渲染图像.

我实际上并不真正了解发生了什么.我正在尝试使用bootstrap调试我的gallery viewer jQuery插件.正确渲染图像仅在方案A中使用chrome进行.

其他调查结果:

• 如果未使用bootstrap css,则会正确呈现图像

HTML(场景A)

<div class="modal-content">
         <div class="modal-header" style="height: 41.79px;">
            <h4>Case Media</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true"><span aria-hidden="true">×</span></button>
         </div> …

我想在我的Angular2项目中使用Bootbox.我搜索了很多,但对我来说没有任何相关的解决方案.
我也试过,angular2-modal但在使用时有很多问题angular2-modal,请为此建议任何好的doc/Examples/Demos.

我有个问题.我需要显示toastr通知当有人想隐藏模态时不会保存更改.我需要在模态隐藏之前触发toastr,当用户再次尝试关闭模态时允许这样做.我试过这样的事情:

declare let jQuery: any;
declare let $: any;
declare let toastr: any;

@Component({
  selector: 'app-trigger',
  templateUrl: './trigger.component.html',
  styleUrls: ['./trigger.component.scss']
})
export class TriggerComponent implements OnInit {

  name: string

  private canHideModal = true;

  constructor() {
  }


ngOnInit(){
      const self = this;
      $('#triggerModal').on('hide.bs.modal', () => {
        if (self.canHideModal) {
          //hide modal here  <---------
        } else {
          toastr['warning']('You have unsaved changes');

          self.canHideModal = true;
           return false
        }
       });
    }

 fireModal(changes : {action:string, name:string}){
   changes.action  = 'show';
   changes.name = 'test';
   this.name = changes.name …

标头应代表页面的结构并相应地嵌套。w3.org声明如下：

\n

固定页面部分的例外

\n

在页面的固定部分中，例如在侧边栏中，标题排名不应根据内容区域中的排名而变化。在这些情况下，页面之间的一致性更为重要。

\n

对于模式对话框来说也是如此吗？毕竟它们通常不是实际页面结构的一部分。我们应该为模式对话框使用哪个标题？

Bootstrap 似乎总是使用 h5s。

作为示例，我们在页脚中使用引导模式，它显示有关应用程序版本的附加信息：

<div id="v-modal" class="modal fade" tabindex="-1" role="dialog">\n  <div class="modal-content">\n    <div class="modal-header">\n      <h5 class="modal-title">Version</h5>\n    </div>\n    <div class="modal-body">\n      <p>Copyright \xc2\xa9 2020 Foobar</p>\n      <p>Version 1.3.7124.19131</p>\n    </div>\n    <div class="modal-footer">\n      <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Close</button>\n    </div>\n  </div>\n</div>\n

在我们最近收到的 a11y 测试中，这被标记为潜在问题。

我正在使用bootstrap 5制作一个简洁的画廊，我想知道如何在 HTML 中不使用“data-bs-...”的情况下触发 bootstrap 模式（以避免重复这些 data- 属性 50 次）。

我设法获得了源代码的完整功能 javascript，但 .modal() 函数和 .show() 函数似乎不起作用。事情是这样的：

function gallery(_src) {
var fullPath = _src;
var fileName = fullPath.replace(/^.*[\\\/]/, '');
var newSrc = "./assets/img/" + fileName;
document.querySelector("div#galleryModal img").src = "./assets/img/" + fileName;

document.getElementById("galleryModal").show(); }

我在最后一行 javascript 上被阻止了。目标：触发#galleryModal。

感谢您的阅读，感谢您的帮助！

我在我的项目中使用 BS modal。我正在使用按钮打开模型，但当我打开模式时，我在控制台中收到此错误。

错误：

modal.js:418 Uncaught TypeError: Cannot read properties of null (reading 'hide')
    at HTMLButtonElement.<anonymous> (modal.js:418:23)
    at HTMLDocument.s (event-handler.js:119:21)

HTML：

<div class="card my-2 mx-2 mt-4" style="width: 18rem;">
<button class="btn btn-primary" data-bs-target="#mymodal" data-bs-toggle="modal"  
style="position: absolute; bottom: 0; right: 0">Get Quote</button>
</div>

模态：

<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
DO SOMETHING
</div>
</div>
</div>
</div>

我正在使用 Bootstrap5 CDN：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>