Bootstrap modal Box Call function Realization Method _javascript skill

When you are doing a project, you need to embed a pop-up window in the page to display the form information. In fact, this pop-up window has a lot of jquery plug-ins can be implemented, my side of the front end is used bootstrap, just bootstrap have the function of modal box, this can be directly achieved by it.

The implementation steps are as follows:

Introduce bootstrap-related CSS and JS files on the front-end page

<link rel= "stylesheet" href= "Https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" > 
<script type= ' text/javascript ' src= '. /public/js/jquery-1.8.2.min.js ' ></script> 
<script src= ' http://libs.baidu.com/jquery/1.9.0/ Jquery.js "></script> 
<script src=" http://cdn.bootcss.com/bootstrap/2.3.1/js/ Bootstrap-transition.js "></script> 
<script src=" http://cdn.bootcss.com/bootstrap/2.3.1/js/ Bootstrap-modal.js "></script>

Then create a button in HTML to click on the Trigger pop-up window, which is to call the F_show function and pass in a parameter to the back end of the AJAX request, AJAX processing request, return to the front end and output to the modal box.

<td><button type= "button" data-toggle= "modal" data-target= "#myModal" onclick= "f_show (' <?php echo $row [' Service_tag '];? > '); "><?php echo $row [' Service_type '];? ></button></td>

Ajax processing Requests

<script> function F_show (tags) {$.ajax ({type: "POST", url: "service_info_ajax.php", data: {"tags": tags}, Datat 
ype: ' JSON ', success:function (data) {if (data.state = = ' 1 ') {$ ("#service_key"). Val (Data.service_key); 
$ ("#service_comments"). Val (data.service_comments); 
$ ("#service_help"). Val (data.service_help); 
$ ("#service_target"). Val (Data.service_target); 
$ ("#service_mail"). Val (Data.service_mail); 
$ ("#service_mailpass"). Val (Data.service_mailpass); 
$ ("#service_date"). Val (data.service_date); if (Data.service_type <= ' 2 ') {document.getElementById ("Remark1"). Style.display = "None"; document.getElementById (
"Remark2"). Style.display = "None"; 
document.getElementById ("Notes1"). Style.display = ""; 
document.getElementById ("Notes2"). Style.display = ""; 
$ ("#notes2"). Text (data.service_notes); 
}else{document.getElementById ("Notes1"). Style.display = "None"; 
document.getElementById ("Notes2"). Style.display = "None"; 
document.getElementById ("Remark1"). Style.display = ""; DocumEnt.getelementbyid ("Remark2"). Style.display = ""; 
$ ("#remark2"). Text (Data.service_remark); 
} 
} 
}, 
}); 
$ (' #myModal '). modal (options); </script>

Back-end processing returns

<?php
require_once (".. /db.class.php ");
Require_once (".. /common.class.php ");
Require_once (".. /mailtmp.class.php ");
Require_once (".. /admin.class.php ");
$obj _comm = new Comm ();
$obj _mail = new Mailtemplate ();
$obj _admin = new Adminsub ();
$tags = Trim ($_post[' tags ']);
# $tags = "1643e0cb3d6078a9a0fd86c8239cd4c1";
$tag _arr = $obj _admin->find_service_tag ($tags, $db);
if ($tag _arr) {
$tag _arr[' state ' = 1;
Echo Json_encode ($tag _arr);
>

Front-End modal Box page display

<!--modal box starts--><div class= "Modal Fade" role= "dialog" aria-labelledby= "Gridsystemmodallabel" id= "Mymodal" >
<div class= "Modal-dialog" role= "document" > <div class= "modal-content" > <div class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" aria-label= "close" ><span aria-hidden= "true" >x </span></button> 
 

Implementation of the effect as shown in figure:

The above is a small series to introduce the Bootstrap modal box call function to achieve the method, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!