Javascript 如何在引导模式中附加 html 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29666449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 03:45:20 来源:igfitidea点击:
How to append html content in bootstrap modal
提问by afeef
I want to append html code in bootstrap modal
我想在引导模式中附加 html 代码
HTML content:
HTML 内容：
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal"> close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
<li><a href="https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at"+eventname+"on "+eventstartdate+", "+eventcityname+""></a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/"+eventname+"&title=Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+".&utm_source=LinkedIn&source=LinkedIn
Come join me at "+eventname+" on "+eventstartdate+","+eventcityname+". Find event details at 10times.com/"+eventname+""></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<a href="#" data-target="#share12" data-toggle="modal"><img src="images/share.png"></a>
Javascript code:
Javascript代码：
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
$('#share12').modal('show');
The problem I'm getting:
我遇到的问题：
- modal is now working
- guide how to show HTML content in bootstrap modal
- 模态现在正在工作
- 指导如何在引导模式中显示 HTML 内容
JSFiddle: http://jsfiddle.net/4gW4y/115/
JSFiddle：http: //jsfiddle.net/4gW4y/115/
回答by rphv
It looks like you're trying to use Javascript variables (eventname, eventstartdatae, eventcityname) directly in the HTML. Instead, you could try building the URL with Javascript, and set the <li>(list items) and <a href="">(links) with jQuery:
看起来您正在尝试直接在 HTML 中使用 Javascript 变量 ( eventname, eventstartdatae, eventcityname)。相反，您可以尝试使用 Javascript 构建 URL，并使用 jQuery设置<li>(list items) 和<a href="">(links)：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="modal_event_name">My Event Name</div>
<div id="modal_event_startdate">My Event Start Date</div>
<div id="modal_city_name">My Event City Name</div>
<div class="modal fade" id="share12" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content get_direction_modal_bg">
<div class="text-right"><a class="fa fa-times white normal12" data-dismiss="modal">close</a></div>
<div class="modal-body">
<p class="white text-center">Share this Event</p>
<div class="share_list_popup">
<ul>
</ul>
</div>
</div>
</div>
</div>
</div>
<button onclick="showModal()">Show Modal</button>
<a href="#" data-target="#share12" data-toggle="modal">Show Modal From Link</a>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
var eventname = document.getElementById("modal_event_name").textContent;
var eventstartdate = document.getElementById("modal_event_startdate").textContent;
var eventcityname = document.getElementById("modal_city_name").textContent;
var facebookLink = "https://www.facebook.com/?" + eventname + "&" + eventstartdate + "&" + eventcityname
var linkedinLink = "http://www.linkedin.com/?" + eventname + " & " + eventstartdate + "&" + eventcityname
$('.share_list_popup ul').append('<li><a href="' + facebookLink + '">Facebook</a></li>');
$('.share_list_popup ul').append('<li><a href="' + linkedinLink + '">LinkedIn</a></li>');
function showModal() {
$('#share12').modal('show');
}
</script>
</body>
</html>
回答by max li
Bootstrap comes with methods for showing & hiding modals. With bootstrap 3 you can do:
Bootstrap 提供了显示和隐藏模态的方法。使用引导程序 3，您可以执行以下操作：
$("#pop").on("click", function() {
$('#imagemodal').modal('show');
$('#imagemodal').on('shown.bs.modal', function() {
$('#imagemodal').find('.modal-body').append('<p>append some html here</p>');
});
});
回答by Mackan
There are several ways to manipulate the data of a modal (or anything else really). Bootstrap provides some, and you can read more about them there.
有几种方法可以操作模态（或其他任何东西）的数据。Bootstrap 提供了一些，您可以在那里阅读有关它们的更多信息。
If you want to use jQuery below are some examples:
如果你想使用 jQuery，下面是一些例子：
$("#pop").on("click", function() {
//ref. to the modal
var imgModal = $('#imagemodal');
//Shows the modal
imgModal.modal('show');
//ref. to the body of the modal
var imgModalBody = imgModal.find('.modal-body');
//Changes the entire content of the body, in the modal, to this
imgModalBody.html('<span style="color:red">This is appended directly from a string or variable</span><br/>');
//Appends a button to the modal body
imgModalBody.append(' <button id="clickMe">Load content from hidden div</button><br/>');
//Adds a click event on the button just appended
imgModal.on("click", "#clickMe", function() {
//Appends text from the hidden div, myHiddenContent, on the page
imgModalBody.append(' ' + $('#myHiddenContent').html());
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" id="pop" data-target="#share12" data-toggle="modal">Open my modal</a>
<div id="myHiddenContent" style="display:none;">This is appended from html already on the page (hidden or not)</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>回答by Manoj De Mel
Could you use a function to generate the hyperlinks?
你能用一个函数来生成超链接吗？
E.g:
例如：
<a href="javascript:doSomething()">Link</a>
function doSomething()
{
var modal_event_name=document.getElementById("modal_event_name");
var modal_event_startdate=document.getElementById("modal_event_name");
var modal_city_name=document.getElementById("modal_event_name");
var url="path?modal_event_name="+modal_event_name+"&modal_event_startdate="+modal_event_startdate + "&modal_city_name="+modal_city_name;
window.open(url,""."");
}
Something like this?
像这样的东西？
回答by anpsmn
The modal is working with the code. Check if bootstrap js is included.
模态正在使用代码。检查是否包含 bootstrap js。
You can use the shownevent of modal to add the variables.
您可以使用shownmodal 事件来添加变量。
var modal_event_name = "Event Name";
var modal_event_startdate = "10th july";
var modal_city_name = "SF"
$('#share12').modal('show');
$('#share12').on('shown.bs.modal', function () {
if (!$(this).hasClass('social-links-added')) {
$(this).addClass('social-links-added');
var linkedin_url = "http://www.linkedin.com/shareArticle?mini=true&utm_campaign=201308&url=http://10times.com/" + modal_event_name + "&title=Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ".&utm_source=LinkedIn&source=LinkedIn Come join me at " + modal_event_name + " on " + modal_event_startdate + "," + modal_city_name + ". Find event details at 10times.com/" + modal_event_name;
var facebook_url = "https://www.facebook.com/sharer/sharer.php?u=www.10times.com&title=Come join me at" + modal_event_name + "on " + modal_event_startdate + ", " + modal_city_name;
$('.share_list_popup ul li:eq(0)').find('a').attr('href', facebook_url);
$('.share_list_popup ul li:eq(1)').find('a').attr('href', linkedin_url);
console.log(facebook_url);
console.log(linkedin_url);
}
});
