2016-09-18 17 views
4

フォームなしでjQueryを使用してモーダルボックスを動的に把握しようとしています。フォームなしでjqueryを使用して動的にモーダルボックスを閉じることを試みています

<a href="#openModal">Open Modal</a> 

<div id="openModal" class="modalDialog"> 
    <div> <a href="#close" title="Close" class="close">X</a> 

    <h2>Modal Box</h2> 

    <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
    </div> 
+0

助けるどこにしようとしたコードがありますか? – mplungjan

+0

いいえ!それはブートストラップではありません。私はCSS HTMLとJQUERYを試しています –

答えて

3

以下のコードを試してみてください、それはあなた

$('#openModal').modal('hide'); 
$('#openModal').modal().hide(); 
$('#openModal').removeClass('show'); 
0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Basic Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

</body> 
</html> 
関連する問題