When multiple modal boxes are displayed on a page, we should use div Wrap it up , No, how can there be format errors .

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.js"></script>
</head> <body>
<div> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#excel"> download Excel Templates </button>
<!-- Excel Modal frame (Modal) -->
<div class="modal fade" id="excel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
<h4 class="modal-title" id="myModalLabel"> download Excel Templates </h4>
</div>
<form action="${pageContext.request.contextPath }/exportWebExcel" method="post">
<div class="modal-body">
Number of multiple choice questions :&nbsp;&nbsp;<input type="text" name="danxuan" value="" title=" Please enter the number of multiple choice questions " /> <br /> <br /> Number of multiple choice questions :&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> Number of judgment questions :<input type="text" name="panduan" /><br /> <br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
<input type="submit" class="btn btn-primary" value=" confirm ">
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div> <p></p>
<!-- ------------------- Multiple modal box styles conflict with each other , The solution is simple , use DIV Each one dialog Wrap up the code fragment of -------------------------------------------- -->
<p></p>
<div>
<!-- Button trigger mode box -->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#wordMT"> download Word Templates </button> <!-- Excel Modal frame (Modal) -->
<div class="modal fade" id="wordMT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
<h4 class="modal-title" id="myModalLabel"> download Word Templates </h4>
</div>
<form action="${pageContext.request.contextPath }/exporWebWord" method="post">
<div class="modal-body">
Number of multiple choice questions :&nbsp;&nbsp;<input type="text" name="danxuan" value="" title=" Please enter the number of multiple choice questions " /> <br /> <br /> Number of multiple choice questions :&nbsp;&nbsp;<input type="text" name="duoxuan" /> <br /> <br /> Number of judgment questions :<input type="text" name="panduan" /><br /> <br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> close </button>
<input type="submit" class="btn btn-primary" value=" confirm ">
</div>
</form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</body> </html>

Bootstrap Modal frame ( One page displays multiple ) More articles about the use of

  1. ( turn ) solve bootstrap Modal box page jitter

    Use bootstrap when , The effect of page jitter often appears , It makes the user experience very unfriendly . Bootstrap To make all the pages ( Here refers to content overflow and non overflow ) The effect is the same , The methods adopted are as follows : When Modal Display time , Set up bod ...

  2. bootstrap Modal frame modal Use remote The second load shows the same solution

    bootstrap Modal frame modal Use remote Load content dynamically , The second load shows the same solution bootstrap Of modal in , Use remote You can dynamically load pages to modal-body in , And the pop-up window shows ...

  3. Bootstrap Modal frame + iframe &gt; Open the subpage &gt; The data transfer / Close modal box

    Parent page bootstrap Modal frame : <div class="modal fade" id="myModal" tabindex="-1" ...

  4. Bootstrap Modal frame (Modal) plug-in unit

    Link to the original text :http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap  Modal frame (Modal) plug-in unit Modal frame (Modal) Yes ...

  5. Bootstrap Modal frame (MVC)

    BZ This blog is mainly for you to introduce MVC How to pop up modal box . If there is anything wrong with this article , I hope the great gods can give me more advice , I also hope to learn more about the same dishes as me .BZ Thank you very much . First, add a click event to the page : @Html.Ac ...

  6. Front end bootstrap Modal frame

    brief introduction : Modal frame (Modal) Is a child form that is overlaid on the parent form . Usually , The goal is to display content from a single source , There can be some interaction without leaving the parent form . Subform provides information . Interaction, etc. . Modal brief introduction Modal Implementation of pop-up form M ...

  7. solve display none To display block Too long rendering time , as well as bootstrap Modal box causes other boxes to input Can't get the solution of the focus problem

    When making custom pages , When I come across such a problem , Because pop ups use bootstrap The pop-up box that comes with , Controlling display and hiding is also controlled by its own attributes Control display , Where the trigger is for example botton Add... To it data-toggle=& ...

  8. 243 ,Bootstrap Modal box plug-in

    Bootstrap Modal box plug-in Learning points : 1. Basic use 2. instructions In this lesson, we mainly study Bootstrap Modal box plug-in in , This is a very common interactive website Pop up function plug-in . One . Basic use Use the modal box ...

  9. JavaScript:bootstrap Simple application of modal box

    Recently, I used bootstrap This powerful front-end framework , Let's sum it up sometime . Here is a simple application of modal box . First , To introduce the corresponding js.css file <link href="css/bootstr ...

  10. Bootstrap, Modal box realizes value transfer , Automatically check

    Catalog Bootstrap, The mode box automatically checks , Value passed 1. Parent page 2. Subpage (modal) Modal frame Bootstrap, The mode box automatically checks , Value passed scene : ​ There is a need for , There is a... On the parent page table, ...

Random recommendation

  1. [ turn ] stay Web Application in project Apache Shiro

    Catalog [-] User authority model chart 1. User authority model Certification and authorization Shiro Authentication and authorization process Shiro Realm detailed list 1. Realize one's own JDBC Realm Why to Shiro show special preference to And S ...

  2. Android Safety Intent Scheme Url attack

    0X01  Preface Intent scheme url It is used in web Page to start the terminal app activity Special URL, Aimed at intent scheme URL Before the big attack , quite a lot android Browse ...

  3. php foreach In circulation unset The following key value problem

    example : $arr=array('a','b','c','d','e','f'); foreach($arr as $index=>$tmp){ echo $index.'=>'.$tmp. ...

  4. [LintCode] Reverse Pairs Flip it right

    For an array A, if i < j, and A [i] > A [j], called (A [i], A [j]) is a reverse pair.return to ...

  5. CSS3 Picture zoom

    Mouse pointing up , Picture enlargement , The mouse leaves the picture to restore the original , And there's amplification . Reduction effect            Css Code implementation :

  6. [ original ]android A little understanding of custom animation

    android Provides a series of animation processing api, Include animator as well as animation etc. . Because the animation effect is based on the principle of human visual residue , So in the animation process android Need to be constantly updated view Related properties of , from ...

  7. Linux System programming @ Process of communication ( One )

    Overview of interprocess communication The reason why process communication is needed : The data transfer Resource sharing Notification event Process control Linux Interprocess communication (IPC) The origin of development Unix Interprocess communication be based on System V Interprocess communication (System V:UNIX System ...

  8. POJ 1061 Frog dating ( Extended Euclid )

    According to the meaning , When two frogs jump to the same point, they meet , So there is  (x+m*t) - (y+n*t) = p * ll;  (t It's the number of jumps ,ll yes a The number of times a frog jumps is the same as b The difference in the number of circles of frogs . The whole distance difference is equal to the circumference of the latitude line ...

  9. Delphi close MDI child window

    Need to be in the subwindow of onClose In the event Action = caFree; That's all right. . procedure Tfrm_aa.FormClose(Sender: TObject; var Action: TC ...

  10. Simple object garbage collection framework for Delphi

    ( One ). origin 1.1 One of my error programs Program name : Stress testing tool for call processing module , Divided into client and server . development tool :Delhpi 5 Related technology : The client and the server establish Socket Connect to simulate the dialing in of a group of phones . ...