blocks|key|525235|text|您可以通过jquery+(javascript)显示模型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525236|$('#yourModalID').modal({
++show:+true
})|code-block|syntax|javascript|525237|演示：here|offset|length|525238|或者，您可以删除类"hide“|525239|<div+class="modal"+id="yourModalID">
++#+modal+content
</div>|525240|​|525241|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/fVgqU/2/^0|0|0|3|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@$I|11|J|12|1|13]]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

you can show the model via jquery (javascript)

<pre><code>$('#yourModalID').modal({
 show: true
})
</code></pre>

Demo: <a href="http://jsfiddle.net/fVgqU/2/">here</a>

or you can just remove the class "hide"

<pre><code>&lt;div class="modal" id="yourModalID"&gt;
 # modal content
&lt;/div&gt;
</code></pre>

​

blocks|key|308422|text|为了手动显示模式弹出窗口，您必须这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308423|$('#myModal').modal('show');|code-block|syntax|javascript|308424|您之前需要使用show:+false对其进行初始化，以便在您手动执行之前不会显示它。|offset|length|style|CODE|308425|$('#myModal').modal({+show:+false})|308426|其中myModal是模态容器的id。|308427|entityMap^0|0|0|7|B|0|0|2|7|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

In order to manually show the modal pop up you have to do this

<pre><code>$('#myModal').modal('show');
</code></pre>

You previously need to initialize it with <code>show: false</code> so it won't show until you manually do it.

<pre><code>$('#myModal').modal({ show: false})
</code></pre>

Where <code>myModal</code> is the id of the modal container.

blocks|key|525331|text|如果你正在寻找一种程序化的模式创建，你可能会喜欢这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525332|http://nakupanda.github.io/bootstrap3-dialog/|offset|length|525333|尽管Bootstrap的modal提供了一种创建modal的javascript方式，但您仍然需要首先编写modal的html标记。|525334|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|19|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

If you are looking for a programmatical modal creation, you might love this:

<a href="http://nakupanda.github.io/bootstrap3-dialog/">http://nakupanda.github.io/bootstrap3-dialog/</a>

Even though Bootstrap's modal provides a javascript way for modal creation, you still need to write modal's html markups first.

blocks|key|525403|text|以下代码可用于在openModal()函数上打开模式并在closeModal()上关闭：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|525404|++++++function+openModal()+{
++++++++++$(document).ready(function(){
+++++++++++++$("#myModal").modal();
++++++++++});
++++++}

+++++function+closeModal+()+{
++++++++++$(document).ready(function(){
+++++++++++++$("#myModal").modal('hide');
++++++++++});++
++++++}|code-block|syntax|javascript|525405|/*+#myModal是模式弹出窗口的id+*/|525406|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The following code useful to open modal on openModal() function and close on closeModal() :

<pre><code> function openModal() {
 $(document).ready(function(){
 $("#myModal").modal();
 });
 }

 function closeModal () {
 $(document).ready(function(){
 $("#myModal").modal('hide');
 }); 
 }
</code></pre>

/* #myModal is the id of modal popup */

blocks|key|308550|text|同样的事情也发生在我身上。我想通过单击表行打开Bootstrap模式，并获得有关每行的更多详细信息。我使用了一个技巧来做这件事，我称之为虚拟按钮！兼容最新版本的Bootstrap+(v5.0.0-alpha2)。它也可能对其他人有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|308551|查看带有预览的代码片段：https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba|offset|length|308552|摘要：|308553|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();
++++})
});|code-block|syntax|javascript|308554|所有这些都是为了使用relatedTarget属性。(参见Bootstrap+docs)|style|CODE|308555|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba|1|https://v5.getbootstrap.com/docs/5.0/components/modal/#varying-modal-content^0|0|C|1Z|0|0|0|0|A|D|T|E|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|O|P]]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

The same thing happened to me. I wanted to open the Bootstrap modal by clicking on the table rows and get more details about each row. I used a trick to do this, Which I call the virtual button! Compatible with the latest version of Bootstrap (v5.0.0-alpha2). It might be useful for others as well.
See this code snippet with preview:
<a href="https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba" rel="nofollow noreferrer">https://gist.github.com/alireza-rezaee/c60da1429c36351ef4f071dec0ea9aba</a>
Summary:
<pre><code>let exampleButton = document.createElement(&quot;button&quot;);
exampleButton.classList.add(&quot;d-none&quot;);
document.body.appendChild(exampleButton);
exampleButton.dataset.toggle = &quot;modal&quot;;
exampleButton.dataset.target = &quot;#exampleModal&quot;;

//AddEventListener to all rows
document.querySelectorAll('#exampleTable tr').forEach(row =&gt; {
 row.addEventListener('click', e =&gt; {
 //Set parameteres (clone row dataset)
 exampleButton.dataset.whatever = e.target.closest('tr').dataset.whatever;
 //Button click simulation
 //Now we can use relatedTarget
 exampleButton.click();
 })
});
</code></pre>
All this is to use the <code>relatedTarget</code> property. (See <a href="https://v5.getbootstrap.com/docs/5.0/components/modal/#varying-modal-content" rel="nofollow noreferrer">Bootstrap docs</a>)

If I go here

<a href="http://getbootstrap.com/2.3.2/javascript.html#modals" rel="noreferrer">http://getbootstrap.com/2.3.2/javascript.html#modals</a>

And click 'Launch demo modal' it does the expected thing. I'm using the modal as part of my signup process and there is server side validation involved. If there are problems I want to redirect the user to the same modal with my validation messages displayed. At the moment I can't figure out how to get the modal to display other than a physical click from the user. How can I launch the model programmatically?

How can I trigger a Bootstrap modal programmatically?

服务器

容器

如果我走到这里然后点击‘启动演示模式’，它会做预期的事情。我正在使用模式作为我的注册过程的一部分，其中涉及到服务器端验证。如果有问题，我希望将用户重定向到与我的验证消息显示相同的模式。目前，除了用户的物理点击，我不知道如何让模式显示出来。如何以编程方式启动模型？

问如何以编程方式触发Bootstrap模式？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何以编程方式触发Bootstrap模式？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何以编程方式触发Bootstrap模式？
EN