如何在引导模式中附加 html 内容答案

【问题标题】：How to append html content in bootstrap modal如何在引导模式中附加 html 内容
【发布时间】：2017-10-30 20:51:57
【问题描述】：

我想在引导模式中附加 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');

我遇到的问题：

模态现在正在工作
指导如何在引导模式中显示 HTML 内容

JSFiddle：http://jsfiddle.net/4gW4y/115/

【问题讨论】：

当您尝试打开模态时，控制台是否出现错误？
没有错误，但我不知道问题出在哪里（模式正在打开）。
你能帮忙在模态中追加 html 代码吗

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您似乎正在尝试直接在 HTML 中使用 Javascript 变量（eventname、eventstartdatae、eventcityname）。相反，您可以尝试使用 Javascript 构建 URL，并使用 jQuery 设置 <li>（列表项）和 <a href="">（链接）：

<!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>

Working fiddle

【讨论】：

我想在 js 中附加 html 并且 url 也附加 html

【解决方案2】：

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>');
  });
});

【讨论】：

【解决方案3】：

有几种方法可以操作模态（或其他任何东西）的数据。 Bootstrap 提供了一些，你可以阅读更多关于它们的信息there。

如果你想使用 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">&times;</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>

【讨论】：

【解决方案4】：

你能用一个函数来生成超链接吗？

例如：

<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,""."");
    }

这样的？

【讨论】：

【解决方案5】：

模态正在使用代码。检查是否包含引导 js。

您可以使用modal的shown事件来添加变量。

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);
    }
});

Fiddle

【讨论】：