Bootstrap 模态链接

13z8s7eq 于 2023-03-27 发布在 Bootstrap

关注(0)|答案(3)|浏览(198)

我怎样才能使按钮成为一个链接，只有在 Bootstrap 3弹出？
代码

<a href="" data-toggle="modal" data-target=".bannerformmodal">Load me</a>

<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Contact Form</h4>
        </div>
        <div class="modal-body">
          <form id="requestacallform" method="POST" name="requestacallform">

            <div class="form-group">
              <div class="input-group">                               
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input id="first_name" type="text" class="form-control" placeholder="First Name" name="first_name"/>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">                               
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input id="last_name" type="text" class="form-control" placeholder="Last Name" name="last_name"/>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">                               
                <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                <input id="email1" type="text" class="form-control" placeholder="Email" name="email1" onchange="validateEmailAdd();"/>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">                               
                <span class="input-group-addon"><i class="fa fa-group"></i></span>
                <input id="company_name_c" type="text" class="form-control" placeholder="Company Name" name="company_name_c"/>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">                               
                <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                <input id="phone_mobile" type="text" class="form-control" placeholder="Mobile" name="phone_mobile"/>
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-building-o"></i></span>
                <select class="form-control" name="monthly_rental" class="selectpicker">
                  <option>How many seats do you have available?</option>
                  <option>10-50</option>
                  <option>50-100</option>
                  <option>100-200</option>
                  <option>200-500</option>
                  <option>500+</option>
                </select>
              </div>
            </div>
            <div class="control-group">
              <div class="controls">                     
                <textarea id="description" type="text" name="description"  placeholder="Description"></textarea>
              </div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-blue">Submit</button>
        </div>        
      </div>
    </div>
  </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/22565247/bootstrap-modal-link

3条答案

按热度按时间

798qvoo81#

请从您的目标中删除。它应该是一个ID

<a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Load me</a>

你也必须像下面这样给予你的模态id

<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">

Here is the solution in a fiddle.

赞(0）回复(0）举报 2023-03-27

gdx19jrr2#

请将链接中的“data-toggle”转换为“data-bs-toggle”，以使其正常工作。您需要给予它一个 id，而不是给它一个类名，并使用该 id 作为链接的href url。

<a href="#bannerformmodal" data-bs-toggle="modal">Load me</a>

<div id="bannerformmodal" class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true">

赞(0）回复(0）举报 2023-03-27

b4lqfgs43#

一个简单的方法是使用一个普通的链接，并添加Bootstrap模态效果。只要使用我的代码，希望你会得到它运行。

<div class="container">
        <div class="row">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addContact" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><b style="color:#fb3600; font-weight:700;">X</b></button><!--&times;-->
                            <h4 class="modal-title text-center" id="addContact">Add Contact</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a data-toggle="tab" style="background-color:#f5dfbe" href="#contactTab">Contact</a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" style="background-color:#a6d2f6" href="#speechTab">Speech</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div id="contactTab" class="tab-pane in active"><partial name="CreateContactTag"></div>
                                    <div id="speechTab" class="tab-pane fade in"><partial name="CreateSpeechTag"></div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <a class="btn btn-info" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

赞(0）回复(0）举报 2023-03-27

我来回答

Bootstrap 模态链接

3条答案

相关问题

热门标签

最新问答