javascript jquery twitter_bootstrap

如何打开模态窗口 Bootstrap 通过 jQuery?

我使用模态窗口的功能 Twitter Bootstrap. 当某人以我的形式点击发送按钮时，我想在按一个按钮时显示模态窗口 "submit button" 以形状的。

<form class="form-wizard" id="myform">

<h2 class="form-wizard-heading">BootStap Wizard Form</h2>

<input type="text" value=""/>

<input type="submit"/>

</form>

 Modal 

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" tabindex="-1">

<div class="modal-header">

<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

<div class="modal-body">

<p>One fine body…</p>

</div>

<div class="modal-footer">

<button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

</div>

jQuery:

$/'#myform'/.on/'submit', function/ev/ {

 $/'#my-modal'/.modal/{

 show: 'false'

 }/; 





 var data = $/this/.serializeObject//;

 json_data = JSON.stringify/data/;

 $/"#results"/.text/json_data/; 

 $/".modal-body"/.text/json_data/; 



 // $/"#results"/.text/data/;



 ev.preventDefault//;

}/;

已邀请:

15 个回复

石油百科

赞同来自:

在 Bootstrap 有几个功能可以手动调用到模态动词：

$/'#myModal'/.modal/'toggle'/;

$/'#myModal'/.modal/'show'/;

$/'#myModal'/.modal/'hide'/;

更多信息可以在这里找到：
https://getbootstrap.com/docs/ ... odals
特别是，
http://getbootstrap.com/javascript/#modals-methods
".

所以你需要改变：

$/'#my-modal'/.modal/{

 show: 'false'

}/;

到：

$/'#myModal'/.modal/'show'/;

如果您想制作自己的弹出窗口，这里是另一个社区成员的建议视频：

https://www.youtube.com/watch?v=zK4nXa84Km4

小姐请别说爱

赞同来自:

此外，您可以使用该属性 via data

<button data-target="#myModal" data-toggle="modal" type="button">Launch modal</button>

在这个特殊的情况下，你不需要写 javascript.

你可以在这里看到更多：
http://getbootstrap.com/2.3.2/ ... odals

董宝中

赞同来自:

最常见的时候

$/'#myModal'/.modal/'show'/;

不起作用，它是由包含引起的 jQuery 两次。包括 jQuery 2 模块不起作用。

删除其中一个链接，以便再次获得。

此外，某些插件也会在这种情况下引起错误 add

jQuery.noConflict//; 

$/'#myModal'/.modal/'show'/;

小明明

赞同来自:

只需调用模态方法/不发送任何参数/ 在选择器的帮助下

jQuery

.

这是一个例子：

$/'#modal'/.modal//;

君笑尘

赞同来自:

如果使用该功能 links onclick 调用模态软件 jQuery, 那 "href" 不可能是 null.

例如：

... ...

<a href="" onclick="openModal//">Open a Modal by jQuery</a>

... ...

... ...

<script type="text/javascript">



function openModal//{



 $/'#myModal'/.modal//;

} 

</script>

莫代尔无法展示。
正确的代码是 :

<a href="#" onclick="openModal//">Open a Modal by jQuery</a>

快网

赞同来自:

这就是如何下载的 bootstrap alert, 一旦文件准备就绪。它很容易添加

$/document/.ready/function//{

 $/"#myModal"/.modal//;

}/;

我做了
https://www.w3schools.com/code ... J6Y6T
- versions W3Schools.

html

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8"/>

<meta content="width=device-width, initial-scale=1" name="viewport"/>

<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

<script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

</head>

<body>

<div class="container">

<h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>

<!-- Trigger the modal with a button -->

<!-- Modal -->

<div class="modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

<!-- Modal content-->

<div class="modal-content">

<div class="modal-header">

<button class="close" data-dismiss="modal" type="button">×</button>

<h4 class="modal-title">Modal Header</h4>

</div>

<div class="modal-body">

<p>Some text in the modal.</p>

</div>

<div class="modal-footer">

<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>

</div>

</div>

</div>

</div>

</div>

<script>

$/document/.ready/function//{

 $/"#myModal"/.modal//;

}/;

</script>

</body>

</html>

郭文康

赞同来自:

熟悉这里的完整解决方案：

http://www.w3schools.com/boots ... d%3Dh
确保以所需的顺序排列了库以获得结果：

1 - 第一的 bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

/换一种说法， jquery.min.js 必须以前调用 bootstrap.min.js/

<link href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"]https://maxcdn.bootstrapcdn.co ... ot%3B[/url] rel="stylesheet"/>

<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">]https://ajax.googleapis.com/aj ... gt%3B[/url]

</script>

<script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

知食

赞同来自:

我尝试了几种失败的方法，但以下需要对我进行咒语：

$/'#myModal'/.appendTo/"body"/.modal/'show'/;

知食

赞同来自:

尝试使用

jQuery

而不是标志

$

调用函数时，它会在我的情况下工作，您可以在下面看到。

jQuery.noConflict//; 

jQuery/'#myModal'/.modal/'show'/;

jQuery.noConflict//;

因为什么时候 jQuery/'#myModal'/.modal/'show'/; 不起作用，它是由它打开两次的事实造成的 jQuery. 包括 jQuery 2 模块不起作用。在我的情况下，它将解决问题。

接下来，您可以通过此链接

https://coderoad.ru/53697389/

君笑尘

赞同来自:

尝试

$/"#myModal"/.modal/"toggle"/

用标识符打开或关闭模态 myModal.

如果上述不起作用，那么这意味着 bootstrap.js 被其他一些文件重新定义 js.
这是解决这个问题的解决方案

1:- 移动 bootstrap.js 下来覆盖其他文件 js.

2:- 确保订单如下所示

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

 Other js files 

<script src="plugins/jQuery/bootstrap.min.js"></script>

诸葛浮云

赞同来自:

<form class="form-wizard" id="myform">

<h2 class="form-wizard-heading">BootStap Wizard Form</h2>

<input type="text" value=""/>

<input id="submitButton" type="submit"/>

</form>

 Modal 

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal hide fade" id="myModal" role="dialog" tabindex="-1">

<div class="modal-header">

<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>

<h3 id="myModalLabel">Modal header</h3>

</div>

<div class="modal-body">

<p>One fine body…</p>

</div>

<div class="modal-footer">

<button aria-hidden="true" class="btn" data-dismiss="modal">Close</button>

<button class="btn btn-primary">Save changes</button>

</div>

</div>

您可以使用它下面的代码运行模态。

$/document/.ready/function//{

 $/"#submitButton"/.click/function//{

 $/"#myModal"/.modal//;

 }/;

}/;

小姐请别说爱

赞同来自:

<script type="text/javascript">

 $/function // {

 $/"mybtn"/.click/function // {

 $/"#my-modal"/.modal/"show"/;

 }/;

 }/;

</script>

风见雨下

赞同来自:

试试吧

MyModal1是模态对象标识符

$/'#myModal1'/.modal/{ show: true }/;

石油百科

赞同来自:

试试吧。这对我来说很有用。

function clicked/item/ {

 alert/$/item/.attr/"id"//;

 }

[code]<link href="https://cdnjs.cloudflare.com/a ... ot%3B rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/a ... gt%3B
<button id="modalME" onclick="clicked/this/;">Click me</button>

<div aria-hidden="true" class="modal" id="modalME">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS</h2>
<a aria-hidden="true" class="btn-close" href="#close">×</a> 
</div>
<div class="modal-body">
<p>One modal example here.</p>
</div>
<div class="modal-footer">
<a class="btn" href="#close">Nice!</a> 
</div>
</div>
</div>
</link>

快网

赞同来自:

Bootstrap 4.3

- 更多细节
https://getbootstrap.com/docs/ ... odal/

$/'#exampleModal'/.modal//;

 Initialize Bootstrap 4 

<link crossorigin="anonymous" href="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"]https://stackpath.bootstrapcdn ... ot%3B[/url] integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" rel="stylesheet"/>

<script crossorigin="anonymous" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="[url=https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>]https://code.jquery.com/jquery ... gt%3B[/url]

<script crossorigin="anonymous" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="[url=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]

<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>]https://stackpath.bootstrapcdn ... gt%3B[/url]

 MODAL 

<div class="modal fade" id="exampleModal" role="dialog" tabindex="-1">

<div class="modal-dialog" role="document">

<div class="modal-content">

<div class="modal-body">

 Hello world 

 </div>

<div class="modal-footer">

<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>

</div>

</div>

</div>

</div>

要回复问题请先登录或注册

如何打开模态窗口 Bootstrap 通过 jQuery?

15 个回复

发起人

相关问题

问题状态

如何打开模态窗口 Bootstrap 通过 jQuery?

与内容相关的链接

15 个回复

发起人

相关问题

问题状态