Click the button to open the modal form


开发工具与关键技术：vs  和
jquery

作者：戴怡斌

撰写时间：2019.4.17

Below that case a modal form a column of its own doing, a very simple modal form, there is the use of plug-ins, layui of js there are two other plug-ins,

Layui, bootstrap-4.1.3-dist, jquery-3.2.1.min.js, you can search the Internet to download address

Open vs, cited above three months js,

<script src="~/Plugins/jquery-3.2.1.min.js"></script>

After downloading Layui have a layuiDoc offline manual, open layuiDoc offline manual,

There are two pages of doc, layui styles are inside

<script src="~/Plugins/layui/layui.all.js"></script>

Note bootstrap-4.1.3-dist plug there are multiple js, spotted in the reference.

<script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

After completion of references cited css js, bootstrap-4.1.3-dist in the css styles used to make the frame

<linkhref="~/Plugins/bootstrap4.1.3dist/css/bootstrap.min.css"rel=“stylesheet” />

<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

In this Liezi inside, Layui in the css style buttons used to set the style.

Css not going to say, focus on that js

After Css styling intact, the effect shown in Figure, the Add button on the right is today's hero

Add button with the corresponding figure is added to the data that the figure of the game

After setting the Add button, set the mask layer, which is the modal form, click the Add button to pop up the game a modal form.

After you set up the modal form, add a click event on the Add button game

<button class="layui-btn layui-btn-sm lianm" "anniudanj()">添加游戏</button>

"Anniudanj (), the name casually set, but () must be added, it must be in the English state in brackets

Otherwise, click the button does not respond.

After the addition is complete the game, you want to save is the same set up click event, just have to be bracketed in the English state

<button type="button" class="btn btn-outline-primary btn-sm" "saveStuInfor()">添加</button>

After Css style all your settings, beginning to write js code to define a variable

was blInsert = true;

This variable is defined whether you want to add to this operation

Then function behind the name must tell you in the name of the add button to set exactly the same.

function anniudanj() {}

In this acquisition frmStuInfor ID button below, input values are reset, and give it a click event

It can be reset write content inside the modal window.

$("#frmStuInfor input[type=‘reset’]").click();

Like this acquisition is to modStudent named ID, #: is the ID selector,

$ ( "# ModStudent .modal-title") text ( "add game information").;

This code is the following modal popup window mean, modStudent entire mask layer inside the ID

$("#modStudent").modal();

Finally, send pictures for reference only.

Here it is only said that the modal form to add an event, save operation another time.

Click the button to open the modal form

Guess you like