Question

我有不同的模态，需要将它们分配给相应的链接

<a type="button" class="btn btn-primary" >Store 1</a>

示例如果带有值（或文本） 商店1 点击我想以编程方式将theses属性添加到文本< strong> 商店1

data-toggle="modal" data-target="#myModal

并打开模态#myModal onclick

检查链接是否包含指定对应attr的特定文本。

感谢您的帮助

Answer 1

为下面的锚标记写下onclick事件，并按照你喜欢的方式传递值。

<a type="button" class="btn btn-primary" onclick="return openStore('Store 1')" >Store 1</a>
<a type="button" class="btn btn-primary" onclick="return openStore('Store 2')" >Store 2</a>

<script type='text/javascript'>
    function openStore(storeType)
    {
        if(storeType === 'Store 1') {
            $("#store1Modal").modal();
        } else if (storeType === 'Store 2') {
            $("#store2Modal").modal();
        }
    }
</script>

Answer 2

您必须检查锚标记是否包含文本Store 1，然后您需要添加如下所示的属性。

$("a.btn").click(function(){
   if($(this).text() == "Store 1") {
       $(this).attr('data-toggle','modal');
       $(this).attr('data-target','#myModal');
   }
});

<强>段

$("a.btn").click(function(){
  if($(this).text() == "Store 1") {
      $(this).attr('data-toggle','modal');
      $(this).attr('data-target','#myModal');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a type="button" class="btn btn-primary" >Store 1</a>

<div id="myModal" 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">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Fiddle DEMO

如何以编程方式将Boostrap Modal attr添加到按钮或链接？

2 个答案: