引导模态自动打开关闭

问题描述：

function modalFunction(hideModal, showModal) { 
 
      console.log(hideModal); 
 
      console.log(showModal); 
 
      $(hideModal).modal('hide').on('hidden.bs.modal',function() { 
 
     $(showModal).modal('show'); 
 
    }); 
 
}

<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"/> 
 

 

 
<body> 
 
<button class="btn btnp-default"><a data-toggle="modal" data-target="#login">Login</a></button> 
 
<button class="btn btnp-default"><a data-toggle="modal" data-target="#signup">Signup</a></button> 
 
    
 
    <div class="modal" id="login"> 
 
    <div class="modal-content"> 
 
    <p><a href="#" onclick="modalFunction('#login', '#signup')">Signup</a></p> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="modal" id="signup"> 
 
    <div class="modal-content"> 
 
    <p><a href="#" onclick="modalFunction('#signup', '#login')">Login</a></p> 
 
    </div> 
 
    </div> 
 
</body>

问题是我需要太隐藏近期开放模式，并显示另一个模式，但下面给出代码，我陷在其中循环模式显示和隐藏不断。没有办法阻止或关闭模态。正如你在演示中看到的，没有办法关闭模式。

这里的情况是

莫代尔登录有链接 - >模态签到
莫代尔注册有链接 - >模态登录

这难道不已经回答？ http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new – Jay

我已经遵循这个答案。运行我的代码片段myModal被卡在循环中 –

答

您可以（使用自定义HTML属性），采取不同的方式：

$('[data-close]').click(function() { 
 
    var closeModal = $(this).attr('data-close'); 
 
    var openModal = $(this).attr('data-open'); 
 
    $(closeModal).modal('hide'); 
 
    $(openModal).modal('show'); 
 
});

<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" /> 
 

 
<body> 
 
    <button class="btn btnp-default"><a data-toggle="modal" data-target="#login">Login</a></button> 
 
    <button class="btn btnp-default"><a data-toggle="modal" data-target="#signup">Signup</a></button> 
 

 
    <div class="modal" id="login"> 
 
    <div class="modal-content"> 
 
     <p><a href="#" data-close="#login" data-open="#signup">Signup</a></p> 
 
    </div> 
 
    </div> 
 

 
    <div class="modal" id="signup"> 
 
    <div class="modal-content"> 
 
     <p><a href="#" data-close="#signup" data-open="#login">Login</a></p> 
 
    </div> 
 
    </div> 
 
</body>

答

下面给出的是现代的做法。您可以参考this link以获取动态创建模态方式的更多详细信息。

function showModal(typeid) { 
 

 
    var message = $('#type_' + typeid); 
 

 
    BootstrapDialog.show({ 
 
    title: typeid==1?"Login": "Sign Up.", 
 
    message: $('#type_' + typeid), 
 
    buttons: [{ 
 
     label: typeid!=1?"Login": "Sign Up.", 
 
     action: function(dialog) { 
 
     dialog.close(); 
 
     showModal(typeid==1?2:1); 
 
     } 
 
    }], 
 
    onhide: function() { 
 
     $('#hidden-div').append(message); 
 
    } 
 
    }); 
 
} 
 

 

 
function showModal1() { 
 

 
    var message = $('#common_div'); 
 

 
    BootstrapDialog.show({ 
 
    title: 'Login', 
 
    message: $('#common_div'), 
 
    onhide: function() { 
 
     $('#hidden-div').append(message); 
 
    } 
 
    }); 
 
}

.setDiv { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 

 

 
<button class="btn btn-primary" onclick="showModal(1)">login</button> 
 
<button class="btn btn-primary" onclick="showModal(2)">Signup</button> 
 
<br> 
 
<br>Or you can do it in a better way 
 
<br> 
 
<br> 
 

 
<button class="btn btn-primary" onclick="showModal1()">login</button> 
 
<button class="btn btn-primary" onclick="showModal1()">Signup</button> 
 

 
<div id="hidden-div" style="display : none"> 
 
    <!-- Login div --> 
 
    <div id="type_1" class="setDiv"> 
 
    This is login div. 
 
    </div> 
 

 
    <!-- Login div --> 
 
    <div id="type_2" class="setDiv"> 
 
    This is signup div. 
 
    </div> 
 

 
    <div id="common_div" class="setDiv" data-title="Sign Up"> 
 
    <ul class="nav nav-tabs"> 
 
     <li class="active"><a data-toggle="tab" href="#home">Signup</a> 
 
     </li> 
 
     <li><a data-toggle="tab" href="#menu1">Login</a> 
 
     </li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <div id="home" class="tab-pane fade in active"> 
 
     <div id="type_1" class="setDiv" data-title="Login"> 
 
      This is login div. 
 
     </div> 
 
     </div> 
 
     <div id="menu1" class="tab-pane fade"> 
 
     <div id="type_2" class="setDiv" data-title="Login"> 
 
      This is login div. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

引导模态自动打开关闭

相关推荐