javascript - Bootstrap 具有多种形式的单一模式窗口

Question

我在模态上提交了一个表单，对于一个表单来说效果很好，但一页上需要有 15 个模态表单。如何将特定的模式开启字段绑定(bind)到每个表单？

我确信我没有很好地解释自己，所以这是一个例子。这是定价表的一部分，因此每个 div 集将提交自己的期间选择和隐藏字段 - 由每个单独的模式窗口开启器启动。

<form action="<?php echo JRoute::_('index.php?option=com_component&view=cart'); ?>" enctype="multipart/form-data" method="post">
    <div class="col col-md-4 no-padding">
        <div class="col-header text-center">
            <h3>Single Domain</h3>
            <h3>$4.99/Mo</h3>
        </div>
        <div class="col-body">
            <ul>
                <li class="row0 yes">Single Domain</li>
                <li class="row1 yes">Unlimited Web Space</li>
                <li class="row0 yes">Unlimited Bandwidth</li>
                <li class="row1 yes">Unlimited Mail Accounts</li>
                <li class="row0">
                    <select name="periods">
                        </option value="12">12 Months</option>
                        </option value="24">24 Months</option>
                        </option value="36">36 Months</option>
                    </select>
                </li>
            </ul>
            <input type="hidden" name="plan_name" value="Single" />
            <input type="hidden" name="plan_type" value="Windows_Hosting" />
            <input type="hidden" name="plan_id" value="123456" />
        </div>
        <div class="col-footer text-center">
            <!-- Button trigger modal -->
            <a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-target="#myModal">Buy Now</a>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog-md">
                    <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">Specify a domain name for your order</h4>
                        </div>
                        <div class="modal-body">
                            <label class="radio-inline">
                                <input type="radio" name="has_domain" id="inlineRadio1" value="option1"> I already have a Domain Name
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="register_domain" id="inlineRadio1" value="option1"> I want to buy a new Domain Name 
                            </label>
                            <input type="text" placeholder="www." id="inputDomain" class="form-control">
                            <div class="row">
                                <strong>Building a website for your business? Don't risk it - safeguard your website with our must-have website tools</strong>
                                <div class="col-sm-6">
                                    <div class="media">
                                        <span class="pull-left sitelock-menu-icon"> </span>
                                        <div class="media-body">
                                            <h4 class="media-heading text-left">Sitelock</h4>
                                            <p class="text-left">Over 5000 websites get attacked everyday. Get SiteLock and secure your website from hackers, viruses and malware.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="media">
                                        <span class="pull-left codeguard-menu-icon"> </span>
                                        <div class="media-body">
                                            <h4 class="media-heading text-left">CodeGuard</h4>
                                            <p class="text-left">Protect yourself from unexpected website crashes. Add CodeGuard and get automatic cloud backup for your website and database.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary btn-small">Continue to checkout</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Modal -->
        </div>
    </div>

编辑:

我认为我包含了太多代码，甚至没有解释，所以这里是一个更短/更好的示例。

<form action="index.php?option=com_component&view=cart" enctype="multipart/form-data" method="post">
    <!-- Set #1 -->
    <select name="periods_single">
        </option value="12">12 Months</option>
        </option value="24">24 Months</option>
        </option value="36">36 Months</option>
    </select>
    <input type="hidden" name="plan_name" value="Single" />
    <input type="hidden" name="plan_type" value="Windows_Hosting" />
    <input type="hidden" name="plan_id" value="123456" />
    <!-- Button trigger modal -->
    <a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-target="#myModal">Buy Now</a>

    <!-- Set #2 -->
    <select name="periods_double">
        </option value="12">12 Months</option>
        </option value="24">24 Months</option>
        </option value="36">36 Months</option>
    </select>
    <input type="hidden" name="plan_name" value="Double" />
    <input type="hidden" name="plan_type" value="Windows_Hosting" />
    <input type="hidden" name="plan_id" value="234567" />
    <!-- Button trigger modal -->
    <a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-target="#myModal">Buy Now</a>

    <!-- Set #3 -->
    <select name="periods_triple">
        </option value="12">12 Months</option>
        </option value="24">24 Months</option>
        </option value="36">36 Months</option>
    </select>
    <input type="hidden" name="plan_name" value="Triple" />
    <input type="hidden" name="plan_type" value="Windows_Hosting" />
    <input type="hidden" name="plan_id" value="345678" />
    <!-- Button trigger modal -->
    <a href="#myModal" class="btn btn-lg btn-default btn-primary" data-toggle="modal" data-target="#myModal">Buy Now</a>            
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog-md">
            <div class="modal-content">
                    <input type="text" placeholder="www." id="inputDomain" class="form-control">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-small">Continue to checkout</button>
                    </div>
            </div>
        </div>
    </div>
    <!-- End Modal -->
</form>

好的，现在您可以看到(在本例中)有三组句点选项，每组都有隐藏字段及其指向单个模式的模式开启器。我想要完成的是知道使用了哪个模式开启器，然后获取与其关联的值。

Answer 1

好的，我们开始吧。我认为 HTML5 数据属性可以为您做到这一点。请记住我在下面分享的代码非常少。看看my JSFiddle以获得更完整的示例。

通过这样做，您只需要一组隐藏字段(您将使用模式表单提交的字段)。发生的情况是这样的:

• 用户点击产品。单击的按钮具有与其关联的数据属性，这些属性会传递到模式表单。
• 模态将打开，其中包含一个表单(您可以将其隐藏，它们可见以进行演示)，该表单现在包含正确的数据。

• 用户继续操作，表单将被提交。

  $(document).ready(function() {
  
    // You'll probably wan't to make .btn-default more specific
    $('.btn-default').on( 'click', function() {
  
      var name = $(this).attr('data-name');
      var type = $(this).attr('data-type');
      var id = $(this).attr('data-id');
      var option = $(this).parents('.product').find(':selected').attr('data-option');
  
      $('.modal input#choosen_option').val(option);
      $('.modal input#choosen_name').val(name);
      $('.modal input#choosen_type').val(type);
      $('.modal input#choosen_id').val(id);
  
   });
  
  });
  

标记:

 <!-- Set #1 --> 
 <div class="product">
   <select name="periods_single">
    <option data-option="12">12 Months</option>
    <option data-option="24">24 Months</option>
    <option data-option="36">36 Months</option>
   </select>
 <a class="btn-default" data-name="Single" data-type="Windows_Hosting" data-id="1">  
   Buy Now
 </a>
 </div>

 <!-- Set #2 --> 
  <div class="product">
   <select name="periods_double">
    <option data-option="12">12 Months</option>
    <option data-option="24">24 Months</option>
    <option data-option="36">36 Months</option>
   </select>
 <a class="btn-default" data-name="Double" data-type="Windows_Hosting" data-id="2">Buy Now</a>
  </div>

带有表单的模态:

<!-- Modal -->
 <div class="modal fade" id="myModal">
    <div class="modal-dialog-md">
        <div class="modal-content">
            <div class="modal-footer">
                <form action="">
                <input type="text" id="choosen_option" />
                <input type="text" id="choosen_name" />
                <input type="text" id="choosen_type" />
                <input type="text" id="choosen_id" />
                </form>
            </div>
        </div>
    </div>
 </div>