2016-09-08 13 views
2

Twitter Bootstrapモーダルを作成しますが、表示する準備ができるまで隠しておきます。Twitter Bootstrapモーダルを生成する方法を隠しておく方法

ここに示すデモのコードは最小です。モダールは正常に作成されますが、display:blockをインラインで適用して、自分のスタイルをオーバーライドします。

modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' 
     + '<div class="modal-dialog modal-lg" role="document">' 
     + '<div class="modal-content">Hello World</div></div></div>' 

    modal = jQuery(modalHtml); 

    modal.modal('show'); 

https://jsfiddle.net/Lx23xqbq/2/

私はこの

modal.modal('hide'); 

を追加することができます。しかし、これは、モーダルは、一瞬のために見ることができるようになります。

Twitter Bootstrapモーダルをユーザーに表示せずに作成するにはどうすればよいですか?

+0

あなたは 'modal.modal( 'show');と呼ばれる理由はありますか? – hungerstar

+0

なぜこのコードを持っていますか?modal.modal( 'show');それを削除すると、モーダルは表示されません。 –

+0

@VimalanJayaGanesh 'modal.modal( 'show')'を呼び出さないと、モーダルは存在しません。モーダルが必要ですが、表示されません。 – Goose

答えて

1

モーダルはデフォルトでCSSクラス.modalで非表示になっています。

modal.modal('show');を削除します。

あなたはmodal.modal('show');をあなたのJSに持っています。modal.modal('hide')を呼び出す前に、2番目の分のモーダルが見えるようにします。


個人的に私は手作業でページにモーダルマークアップを配置します。

var $button = $('button'); 
 
var $modal = $('#myModal'); 
 

 
$modal.on('show.bs.modal', function(e) { 
 

 
    // Optional. We update the modal with content stored in the data-content 
 
    // attribute of the <button>. 
 
    // You could also grab another hidden element to inject or perform 
 
    // AJAX here. 
 
    var content = $(e.relatedTarget).data('content'); 
 

 
    $modal 
 
    .find('.modal-content') 
 
    .text(content); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button> 
 

 
<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal"> 
 
    <div class="modal-dialog modal-lg" role="document"> 
 
    <div class="modal-content">Hello World</div> 
 
    </div> 
 
</div>

ページに注入することはあまり変わらないだろう。

var html = 
 
    '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' + 
 
    '<div class="modal-dialog modal-lg" role="document">' + 
 
     '<div class="modal-content">Hello World</div>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
// Append modal markup to page. 
 
$('body').append(html); 
 

 
var $button = $('button'); 
 
var $modal = $('#myModal'); 
 

 
$modal.on('show.bs.modal', function(e) { 
 

 
    // Optional. We update the modal with content stored in the data-content 
 
    // attribute of the <button>. 
 
    // You could also grab another hidden element to inject or perform 
 
    // AJAX here. 
 
    var content = $(e.relatedTarget).data('content'); 
 

 
    $modal 
 
    .find('.modal-content') 
 
    .text(content); 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

+0

私が 'modal.modal( 'show')'を呼び出さないと、モーダルは存在しません。私はモーダルが存在する必要がありますが表示されません – Goose

+0

マークアップにモーダルを配置できない理由はありますか?または、ページに挿入しますか?次のイベント 'show.bs.modal'にフックできます。 – hungerstar

+0

私は、モーダルを生成するために 'modal.modal( 'show');を使うのが望ましい方法であると教えられました。このアプローチを検討しながら、私はこの問題を横断しました。 – Goose

0

どのようにユーザーを するためにそれを表示することなく、Twitterのブートストラップモーダルを作成することができますか?

技術的には、最初の2行のコードで技術的に既に作成しています。 3行目までは表示されません(modal.modal('show');)。

あなたが達成しようとしていると思われることは、モーダルを作成するコードを表示/非表示のコードから分離することです。問題(私は仮定している)は、スコープ外であるため、コード内の他の部分で、変数modalmodal = jQuery(modalHtml);で作成したもの)への参照がなくなったということです。

あなたのHTMLページにこれを追加します。

<div id="hidden-modal" style="display:none"></div> 

後述のように、あなたのJavascriptを更新します。

modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' 
    + '<div class="modal-dialog modal-lg" role="document">' 
    + '<div class="modal-content">Hello World</div></div></div>' 

// inject the modal markup into the hidden element on the page 
jQuery('#hidden-modal').html(modalHtml); 

// whenever ready, retrieve the hidden modal html and display it 
jQuery(jQuery('#hidden-modal').html()).modal('show'); 

https://jsfiddle.net/Lx23xqbq/3/

0

私はあなたの質問を理解していれば、これは仕事をしなければならない:

$(document).ready(function() { 
 
    
 
    draw(); 
 
    
 
}); 
 

 

 
function draw() { 
 
    var html = "" 
 
    html += '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>'; 
 
    html += '<hr />'; 
 
    html += '<div id="myModal" class="modal fade" role="dialog">'; 
 
    html += '<div class="modal-dialog">'; 
 
    html += '<div class="modal-content">'; 
 
    html += '<div class="modal-header">'; 
 
    html += '<button type="button" class="close" data-dismiss="modal">&times;</button>'; 
 
    html += '<h4 class="modal-title">Modal Header</h4>'; 
 
    html += '</div>'; 
 
    html += '<div class="modal-body">'; 
 
    html += '<p>Some text in the modal.</p>'; 
 
    html += '</div>'; 
 
    html += '<div class="modal-footer">'; 
 
    html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; 
 
    html += '</div>'; 
 
    html += '</div>'; 
 
    html += '</div>'; 
 
    html += '</div>'; 
 
    
 
    $('#modal').html(html); 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div id="modal"> 
 
</div>
ページは、関数draw()をモーダルを描画し、あなたが好きなボタン、ハイパーリンク、ラベルまたはをクリックするまで隠され、それを維持ロードされ

関連する問題