Bootstrap mode box call function implementation method, bootstrap Mode

Bootstrap mode box call function implementation method, bootstrap Mode

You need to embed a pop-up window in the page to display the form information when you are working on a project. In fact, many jquery plug-ins can be implemented in this pop-up window. I use Bootstrap at the front end. Just as Bootstrap has the modal box function, you can implement it directly.

The implementation steps are as follows:

Introduce css and js files related to bootstrap 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 the trigger pop-up window. In this window, call the f_show function and input a parameter to initiate an Ajax request to the backend. After Ajax processes the request, return to the front end and output it 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}, dataType:'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 return

<?phprequire_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 start --> <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"> × </span> </button> 

Effect

The above is the implementation method of the Bootstrap modal box call function introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in time. Thank you very much for your support for the help House website!