Javascript 如何以编程方式触发引导模式？

如果我去这里

---

然后单击“启动演示模式”，它将完成预期的操作。我使用模式作为注册过程的一部分，其中涉及服务器端验证。如果出现问题，我希望将用户重定向到显示验证消息的相同模式。目前，除了用户的物理单击之外，我不知道如何显示模式。如何以编程方式启动模型？

您可以通过jquery（javascript）显示模型

演示：

或者您可以删除类“hide”

#模态内容

---

​

要手动显示模式弹出窗口，必须执行以下操作

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

您以前需要使用

show:false

对其进行初始化，以便在手动执行之前不会显示它

$('#myModal').modal({ show: false})

---

其中

myModal

是模态容器的id

如果您正在寻找编程模态创建，您可能会喜欢：

---

尽管Bootstrap的模式为模式创建提供了javascript方式，但您仍然需要先编写模式的html标记。

您不应该在触发模式的元素（如按钮）中写入data toggle=“modal”，您可以手动显示模式：

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

并隐藏：

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

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg">
  Launch demo modal
</button>

<!-- 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-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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

---

我想用

角度（2/4）

的方式来做这件事，下面是我所做的：

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

Html

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

&时代；
接近

以下代码对在openModal（）函数上打开模式和在closeModal（）上关闭非常有用：

---

/*#myModal是modal弹出窗口的id*/

同样的事情也发生在我身上。我想通过单击表中的行来打开引导模式，并获得关于每一行的更多详细信息。我使用了一个技巧，我称之为虚拟按钮！与最新版本的引导程序（v5.0.0-alpha2）兼容。它也可能对其他人有用

请查看此代码段的预览：

总结：

let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
    row.addEventListener('click', e => {
        //Set parameteres (clone row dataset)
        exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
        //Button click simulation
        //Now we can use relatedTarget
        exampleButton.click();
    })
});

---

所有这些都是为了使用

relatedTarget

属性。（请参阅）

这是不带jQuery的引导v5的代码

let myModal=new bootstrap.Modal（document.getElementById（'myModal'），{}）；
myModal.show（）；

演示 这是一个以编程方式打开页面加载模式的演示

裁判

---

谢谢。结果是这样的。然而，有一个观察结果是，当我打开模式框时，它会重置滚动，如果我从页面底部触发模式框，页面会滚动到顶部。我该怎么阻止它？@tdubs:奇怪，它应该会起作用。请参阅最新的模态代码。到目前为止，我看到，它应该仍然是working@ClaudioRedi，我在控制台中尝试了这两种方法，我发现只有一种方法可以使用chromium$（'#myModal'）.modal（{show:false}）不起作用，但是$（'#myModal'）.modal（'hide'）起作用。不确定为什么有任何方法可以将自定义值或参数作为$（'#myModel'）之类的选项传递。model（{data:1，show:false}）@divinedragon后来我知道，但是滚动到页面顶部的问题可能是由于触发带有类似

“

的标记的弹出窗口，并且在处理程序中未能

返回false

或

preventDefault

。浏览器正在按照指示进行操作，并滚动到默认定位点-页面顶部。我已经有过几次这样的经历，因为我们的CSS有时依赖于设置一个

href

来匹配样式。我有一个URL，可以打开带有数据切换的模式。然后在模态内部，我有一个按钮，它调用一个函数，它做的最后一件事就是使用你建议的隐藏方法关闭模态。伟大的请解释张贴答案时代码的作用。

<div [class.show]="visible" [class.in]="visible" class="modal fade" id="confirm-dialog-modal" role="dialog">
..
</div>`

@ViewChild('rsvpModal', { static: false }) rsvpModal: ElementRef;
..
@HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent) {
    this.hideRsvpModal();
  }
..
  hideRsvpModal(event?: Event) {
    if (!event || (event.target as Element).classList.contains('modal')) {
      this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'none');
      this.renderer.removeClass(this.rsvpModal.nativeElement, 'show');
      this.renderer.addClass(document.body, 'modal-open');
    }
  }
  showRsvpModal() {
    this.renderer.setStyle(this.rsvpModal.nativeElement, 'display', 'block');
    this.renderer.addClass(this.rsvpModal.nativeElement, 'show');
    this.renderer.removeClass(document.body, 'modal-open');
  }

<!--S:RSVP-->
<div class="modal fade" #rsvpModal role="dialog" aria-labelledby="niviteRsvpModalTitle" (click)="hideRsvpModal($event)">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="niviteRsvpModalTitle">

                </h5>
                <button type="button" class="close" (click)="hideRsvpModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary bg-white text-dark"
                    (click)="hideRsvpModal()">Close</button>
            </div>
        </div>
    </div>
</div>
<!--E:RSVP-->

      function openModal() {
          $(document).ready(function(){
             $("#myModal").modal();
          });
      }

     function closeModal () {
          $(document).ready(function(){
             $("#myModal").modal('hide');
          });  
      }

let exampleButton = document.createElement("button");
exampleButton.classList.add("d-none");
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = "modal";
exampleButton.dataset.target = "#exampleModal";

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row => {
    row.addEventListener('click', e => {
        //Set parameteres (clone row dataset)
        exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
        //Button click simulation
        //Now we can use relatedTarget
        exampleButton.click();
    })
});