比较来自世界各地的卖家的域名和 IT 服务价格

如何打开模态窗口 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//;
}/;
已邀请:

石油百科

赞同来自:

在 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>
<!-- Modal -->
<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> <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here.</p>
</div>
<div class="modal-footer">
<a class="btn" href="#close">Nice!</a> <!--CHANGED TO "#close"-->
</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>

要回复问题请先登录注册