Jquery modal dialog box data transfer problem

Yesterday when you used bootstrap and jquery to make a modal dialog box for a Web page, you can pass parameters to the modal dialog box by setting the button.

Effects can be referenced by links: http://v3.bootcss.com/javascript/#modals-related-target

In the above example, embedded in the Jquery.min.js and docs.min.js two JS files, the transfer parameters of the JS function is implemented in the doc

If you want to do your own form form to pass many parameters, you need to modify the JS function.

The steps are as follows:

1. Button parameter

<button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#AddColorInfo" data-whatever= ' 1000 ' > New colors </button>

2. Modal dialog box

<div class= "Modal Fade" id= "Addcolorinfo" tabindex= "-1" role= "dialog" Aria-labelledby= "Addcolorinfolabel" aria-hidden= "false" > <div class= "Modal-dialog" > <div class= "Modal-content" > <div class= "Modal-header" > <button type= "button" class= "Close" Data-dismiss= "Modal" aria-hidden= "true" > &times; </button> Add color information </div> <div class= "Modal-body" > <form class= "form-horizontal" role= "form" > <div class= "Form-group" >                   < Label for= "ColorName" class= "col-sm-4 control-label" > Color name </label>                    <div class= "col-sm-4";                    <input type= "Text" class= "Form-control" id= "colorname" placeholder= "color name";                    </div>                 </div>                 <div class= "Form-group" > <div class= "Col-sm-offset-4 col-sm-8" > <button type= "Submit" class= "Btn btn-default" > OK </button> </div> </div> </form> </div>

3. js function

<script type= "Text/javascript";     & nbsp;   $ (' #AddColorInfo '). On (' Show.bs.modal ', function (event) {            var button = $ (event.relatedtarget)//button that triggered the modal    & nbsp;      var recipient = button.data (' whatever ')//Gets the parameter value from the Data-* property of the button            var modal = $ (this)           //Modal.find ('. Modal-title '). Text (' New message to ' + recipient)           //Modal.find ('. Modal-body input '). Val (recipient)            modal.find (' #colorName '). Val (recipient)//  find colorname and assign         )     </script>

It is important to note that the JS function must be placed after the introduction of jquery.min.js, otherwise it will not achieve the effect of the parameters.

There seems to be a simpler way to look at it before, but it's not clear how to use it.

Jquery modal dialog box data transfer problem