我想在 Bootstrap 模式中附加 html 代码
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 代码:
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');
我遇到的问题:
- 模态正在运行
- 指导如何在 Bootstrap 模式中显示 HTML 内容
JSFiddle:http://jsfiddle.net/4gW4y/115/
最佳答案
看起来您正在尝试直接在 HTML 中使用 Javascript 变量( eventname 、 eventstartdatae 、 eventcityname )。相反，您可以尝试使用 Javascript 构建 URL，并设置 <li> (列表项)和 <a href=""> (链接)与 jQuery:
<!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>
关于javascript - 如何在 Bootstrap 模式中附加 html 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29666449/