堆棧內存溢出
  簡體   English   中英

如何在bootstrap模式中追加html內容

[英]How to append html content in bootstrap modal

 原文  2015-04-16 05:59:27  5   5    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我想在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/

5 個解決方案

解決方案1
 4  2015-04-16 06:29:54

看起來您正在嘗試直接在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>

工作小提琴

解決方案2
 3  2015-04-16 06:46:55

Bootstrap附帶了顯示和隱藏模態的方法。 使用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
 0  2015-04-16 06:27:59

你能用一個函數來生成超鏈接嗎？

例如： 

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

像這樣的東西？

解決方案4
 0  2015-04-16 06:29:40

模態正在使用代碼。 檢查是否包含bootstrap js。

您可以使用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);
    }
});

小提琴

解決方案5
 0  2015-04-16 07:26:18

有幾種方法可以操縱模態的數據（或其他任何東西）。 Bootstrap提供了一些，您可以在那里閱讀更多相關信息。

如果你想在下面使用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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將HTML附加到引導模式不起作用 HTML元素上的Bootstrap模態附加缺少的CSS 如何清除內容-Bootstrap模式 來自另一個 HTML 文件的 BootStrap 4 模態內容 如何在引導模式中的表中附加行 如何在模態版本之前替換附加內容 如何將HTML內容附加到iframe？ 如何在html中附加javascript內容 如何將內容附加到Twitter-Bootstrap彈出窗口 如何將組件內容打開為引導模式？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM