Question

朋友我正在使用下面的模式窗口代码但我只输出黑屏，而没有模态窗口组件遇到以下错误

onExtensionMsgReceived：ddBgIsReady DragAndDropController.js：173 onExtensionMsgReceived：getSettings DragAndDropController.js：173 onExtensionMsgReceived：getSearchSources DragAndDropController.js：173 onExtensionMsgReceived：getShareSources

请帮帮我

<head>
 <meta name ="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href ="bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>

<script type="text/javascript">
$(function(){
    $("#btn-show-modal").click(function(e){
        e.preventDefault();
        $("#dialog-example").modal('show');
       });
   });

</script>
<title>Dash Board</title>
</head> 
 <body>
<p><a href="#" id="btn-show-modal">Show Modal Dialog</a>

<div class="modal hide" id="dialog-example">

    <div class = "modal-header">
    <h1>My ModalDialog</h1>
    </div>

    <div class="modal-body">

    </div>

    <div class ="modal-footer">
    <a href="#" class="btn">close</a>
    <a href ="#" class="btn btn-primary">Save</a>
    </div>
  </div>

Answer 1

您的模态标记对于Bootstrap v3不正确请参考示例：http://getbootstrap.com/javascript/#modals-examples

特别是，您不应该使用hide，而且您错过了modal-dialog和modal-content <div>。

Answer 2

添加bootstrap.css，jquery.min.js和bootstrap.min.js

<html>
<head>
 <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/css/bootstrap.css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head>

<body>
<p><a href="#" id="btn-show-modal">Show Modal Dialog</a>

<div class="modal hide" id="dialog-example">

    <div class = "modal-header">
    <h1>My ModalDialog</h1>
    </div>

    <div class="modal-body">

    </div>

    <div class ="modal-footer">
    <a href="#" class="btn" id='btn-close'>close</a>
    <a href ="#" class="btn btn-primary">Save</a>
    </div>
  </div>
</body>
<script type='text/javascript'>
$(function(){
    $("#btn-show-modal").click(function(e){
        e.preventDefault();
        $("#dialog-example").modal('show');
       });

    $("#btn-close").click(function(e){
        e.preventDefault();
        $("#dialog-example").modal('hide');

    });
   });

</script> 
</html>

http://jsfiddle.net/7Tw4a/

模态窗口不可见

2 个答案: