动态更改Boostrap标题onclick

时间：2017-06-12 09:14:12

标签： javascript jquery html twitter-bootstrap

你能帮我一个动态改变模态瓦片的方法吗？

我需要用户为他们点击的每个按钮看到不同的磁贴，我已经用html创建了一个原型，请告诉我是否有更好/更安全的方法来实现这个目标：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div class="address"></div>
      </div>
      <div class="col-md-2"></div>
    </div>
    <div id="modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">X</button>
            <h4 class="modal-title">Title 1</h4>
          </div>
          <div class="modal-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 1</a>
    <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 2</a>
    <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 3</a>
    <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 4</a>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这是小提琴：https://jsfiddle.net/africanheart/L17c7y91/

5 个答案:

答案 0 :(得分：1)

要获得Dynamic Tiles，我认为这是完美的解决方案。 我为您的代码添加了一个类并删除了一个类 我在Javascript中添加了一些Tiles Classes。

只需查看代码段或this Stack Overflow answer

即可 

var cars = ["glyphicon-film","glyphicon-th-large", "glyphicon-th", "glyphicon-th-list"];
var i=0;
$(".tile").addClass(cars[0])
$(".mybtn").click(function(){
$(".tile").removeClass(cars[i])
i++;
if(i<4){
$(".tile").addClass(cars[i])
}
else{
i=0;
$(".tile").addClass(cars[i])
}
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 


<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="address">
     
    </div>
  </div>
  <div class="col-md-2"></div>
</div>

<!-- Modal -->
<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h4 class="modal-title">Title 1</h4>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

  <a data-toggle="modal" data-target="#modal" class="btn btn-danger mybtn"><span class="glyphicon tile"></span> Title 1</a> 
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger mybtn"><span class="glyphicon tile"></span> Title 2</a>
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger mybtn"><span class="glyphicon tile"></span> Title 3</a>
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger mybtn"><span class="glyphicon tile"></span> Title 4</a>
</div>

</body>
</htmclassl>

`

答案 1 :(得分：0)

使用 javascript 方法显示 模式 。并在显示模态之前更改标题。这是示例

这里我用showModal（）方法来显示模态。

function showModal(title){
   $('.modal-title').html(title); // changing the title of modal
   $('#modal').modal('show');     // showing modal
}

从href="javascript:showModal('Title 1');"标记

中的anchor调用该方法

＆＃13;
＆＃13; 
function showModal(title){
$('.modal-title').html(title);
$('#modal').modal('show');
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
    <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-8">
        <div class="address"></div>
      </div>
      <div class="col-md-2"></div>
    </div>
    <div id="modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">X</button>
            <h4 class="modal-title">Title 1</h4>
          </div>
          <div class="modal-body">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <a href="javascript:showModal('Title 1');" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 1</a>
    <a href="javascript:showModal('Title 2');" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 2</a>
    <a href="javascript:showModal('Title 3');" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 3</a>
    <a href="javascript:showModal('Title 4');" data-toggle="modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 4</a>
  </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是解决问题的正确方法。它位于official documentation并且是动态的。

$(document).ready(function() {

	$('#modal').on('show.bs.modal', function(e) {
		var btn = $(e.relatedTarget);
    var title = btn.data('title');
    $(this).find('.modal-title').text(title);
  });

});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p> 


<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-8">
    <div class="address">
     
    </div>
  </div>
  <div class="col-md-2"></div>
</div>

<!-- Modal -->
<div id="modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


  <a data-toggle="modal" data-target="#modal" data-title="Title 1" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 1</a>
  <a data-toggle="modal" data-target="#modal" data-title="Title 2" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 2</a>
  <a data-toggle="modal" data-target="#modal" data-title="Title 3" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 3</a>
  <a data-toggle="modal" data-target="#modal" data-title="Title 4" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 4</a>
</div>

它使用“data- *”属性模式，可以从调用者按钮的属性中检索更多信息

答案 3 :(得分：-1)

一个小的JQuery代码，可以帮助您实现模态标题的更改。

$(".btn-danger").click(function(e) {
  $(".modal-title").text($(this).text());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>


  <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      <div class="address">

      </div>
    </div>
    <div class="col-md-2"></div>
  </div>

  <!-- Modal -->
  <div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">X</button>
          <h4 class="modal-title">Title 1</h4>
        </div>
        <div class="modal-body">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>


  <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 1</a>
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 2</a>
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 3</a>
  <a data-toggle="modal" data-target="#modal" class="btn btn-danger"><span class="glyphicon glyphicon-th-large"></span> Title 4</a>
</div>

答案 4 :(得分：-1)

解决了您的问题请看看这个把这个js放在代码下面 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn-danger").click(function(){
        //alert($(this).text())
        title = $(this).text();
        $('.modal-title').html(title);
    });
});
</script>
相关问题
最新问题