[英]Display Bootstrap Modal using javascript onClick
I need to be able to open a Twitter bootstrap modal window using the onClick=""
or similar function. 我需要能够使用
onClick=""
或类似功能打开Twitter引导模式窗口。 Just need the code to go into the onClick=""
. 只需要代码进入
onClick=""
。 I am trying to make a click-able div
to open the modal. 我正在尝试制作一个可点击的
div
来打开模态。
Code Excerpts: 代码摘录:
Div Code: Div代码:
<div class="span4 proj-div" onClick="open('GSCCModal');">
Modal Div Code: 模态Div代码:
<div id="GSCCModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Javascript: 使用Javascript:
function open(x){
$(x).modal('show');
}
You don't need an onclick. 你不需要onclick。 Assuming you're using Bootstrap 3 Bootstrap 3 Documentation
假设您正在使用Bootstrap 3 Bootstrap 3文档
<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>
<div id="GSCCModal" class="modal fade" 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-hidden="true">× </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>
If you're using Bootstrap 2, you'd follow the markup here: http://getbootstrap.com/2.3.2/javascript.html#modals 如果你使用的是Bootstrap 2,你可以按照这里的标记: http : //getbootstrap.com/2.3.2/javascript.html#modals
I was looking for the onClick option to set the title and body of the modal based on the item in a list. 我正在寻找onClick选项,根据列表中的项目设置模态的标题和正文。 T145's answer helped a lot, so I wanted to share how I used it.
T145的答案帮了很多忙,所以我想分享一下我如何使用它。
Make sure the tag containing the JavaScript function is of type text/javascript to avoid conflicts: 确保包含JavaScript函数的标记是text / javascript类型以避免冲突:
<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {
/*
* '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
* the modal HTML code that hold the title and body respectively. These id's
* can be named anything, just make sure they are added as necessary.
*
*/
$('#myModalTitle').html(myTitle);
$('#myModalBody').html(myBodyHtml);
$('#myModal').modal('show');
}</script>
This function can now be called in the onClick method from inside an element such as a button: 现在可以在onClick方法中从一个元素(如按钮)内部调用此函数:
<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>
A JavaScript function must first be made that holds what you want to be done: 首先必须创建一个JavaScript函数来保存您想要完成的任务:
function print() { console.log("Hello World!") }
and then that function must be called in the onClick method from inside an element: 然后必须在元素内部的onClick方法中调用该函数:
<a onClick="print()"> ... </a>
You can learn more about modal interactions directly from the Bootstrap 3 documentation found here: http://getbootstrap.com/javascript/#modals 您可以直接从此处的Bootstrap 3文档中了解有关模态交互的更多信息: http : //getbootstrap.com/javascript/#modals
Your modal bind is also incorrect. 你的模态绑定也是不正确的。 It should be something like this, where "myModal" = ID of element:
它应该是这样的,其中“myModal”=元素的ID:
$('#myModal').modal(options)
In other words, if you truly want to keep what you already have, put a "#" in front GSCCModal and see if that works. 换句话说,如果你真的想保留已有的东西,可以在GSCCModal前加一个“#”,看看是否有效。
It is also not very wise to have an onClick bound to a div element; 将onClick绑定到div元素也不是很明智; something like a button would be more suitable.
像按钮之类的东西会更合适。
Hope this helps! 希望这可以帮助!
I had the same problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. 我有同样的问题,经过大量的研究,我最终建立了一个js函数,根据我的要求动态创建模态。 Using this function, you can create popups in one line such as:
使用此功能,您可以在一行中创建弹出窗口,例如:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc. 或者您可以使用其他复杂功能,例如iframe,视频弹出窗口等。
Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/ 在https://github.com/aybhalala/puymodals上找到它。有关演示,请访问http://pateladitya.com/puymodals/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.